/* ==========================================================================
   Invitation templates. Shared by the landing page (hero envelope, template
   cards) and the guest page (demo.php). All sizes inside .cv use container
   units (cqi), so one design scales from a 150px card to a full phone.

   Stationery language for every design: paper with a fine grain, gold-foil
   line work (inc/ornaments.php), serif or refined type, letter-spaced capitals
   for details, hairline rules. Each template has its own composition.

   Variables per template variant:
     --bg --ink        paper and text
     --acc             accent (names, day, seeds, buttons)
     --gold --line     solid gold and the hairline colour
     --g1 --g2 --g3    gold-foil gradient stops for the drawings
     --fn --fd --fx --fb   fonts: names, display, details (capitals), body text
   ========================================================================== */

:root {
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Zero-specificity defaults; every template overrides what it needs. */
:where(.cv, .cvm, .inv) {
  --fd: "Cormorant Garamond", Georgia, serif;
  --fb: "Cormorant Garamond", Georgia, serif;
  --fn: var(--fd);
  --fx: "Cormorant Garamond", Georgia, serif;
  --gold: #a8803a; --line: rgba(168,128,58,.55);
  --g1: #8a6326; --g2: #e6c983; --g3: #b38b3d;
  --grain: var(--grain-dark);
}

.cv {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 9 / 18.5;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  isolation: isolate;
  font-variant-numeric: lining-nums;
}
.cv * { margin: 0; }
/* paper grain on the cover, the card preview and the guest page */
:is(.cv, .cvm, .inv)[data-v] { background-image: var(--grain); font-feature-settings: "lnum" 1; }

.cv-bg, .cv-frame, .cv-arch { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
svg.cv-bg { width: 100%; height: 100%; }
.cv-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18cqi 12cqi 15cqi; text-align: center;
}
.cv-top { width: 40cqi; height: auto; margin-bottom: 6cqi; flex: none; }
.cv-foot { flex: none; }

/* ---- type ---- */
.cv-intro { font: italic 400 5.2cqi/1.3 var(--fd); max-width: 62cqi; margin-bottom: 5cqi; opacity: .85; text-wrap: balance; }
.cv-names {
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqi;
  font: 300 15cqi/.98 var(--fn); letter-spacing: -.005em;
}
.cv-amp {
  display: flex; align-items: center; gap: 3cqi;
  font: italic 400 8.5cqi/1 var(--fd); color: var(--gold); letter-spacing: 0;
}
.cv-amp::before, .cv-amp::after { content: ""; width: 11cqi; height: .2cqi; background: var(--line); }
.cv-sub { font: 600 4.6cqi/1 var(--fx); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin-top: 2cqi; }

/* date: weekday | day | month, then year · time (style A, the default) */
.cv-date--parts {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 3.5cqi;
  width: 80cqi; margin-top: 7cqi;
}
.cv-date--parts [data-part="wday"], .cv-date--parts [data-part="month"] {
  padding: 2.3cqi 0 2.3cqi .22em; border-block: .2cqi solid var(--line);
  font: 600 3.3cqi/1 var(--fx); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.cv-date--parts [data-part="day"] { font: 300 13.5cqi/.9 var(--fd); color: var(--acc); font-variant-numeric: lining-nums; }
.cv-date--parts .cv-time {
  grid-column: 1 / -1; margin-top: 3.4cqi; opacity: .8;
  font: 600 3.1cqi/1 var(--fx); letter-spacing: .24em; text-transform: uppercase; font-variant-numeric: lining-nums;
}
/* style B: one line of capitals (modern templates) */
.cv-date--parts.is-line, :is(.tpl-seadet, .tpl-ayisigi, .tpl-mermer) .cv-date--parts {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2.4cqi 2.2cqi; width: auto;
}
:is(.tpl-seadet, .tpl-ayisigi, .tpl-mermer) .cv-date--parts > span:not(.cv-time) {
  padding: 0; border: 0; font: 400 3.6cqi/1 var(--fx); letter-spacing: .26em; text-transform: uppercase; color: inherit;
}
:is(.tpl-seadet, .tpl-ayisigi, .tpl-mermer) [data-part="wday"]::after { content: " ·"; }
:is(.tpl-seadet, .tpl-ayisigi, .tpl-mermer) .cv-date--parts .cv-time { flex-basis: 100%; margin-top: 0; }
/* style C: weekday above, a large italic "19 iyun", time below (romantic templates) */
:is(.tpl-kelagayi, .tpl-lale, .tpl-bag) .cv-date--parts {
  grid-template-columns: auto auto; grid-template-areas: "w w" "d m" "t t"; justify-content: center; column-gap: 2.4cqi; width: auto;
}
:is(.tpl-kelagayi, .tpl-lale, .tpl-bag) [data-part="wday"] { grid-area: w; border: 0; padding: 0 0 2cqi .22em; }
:is(.tpl-kelagayi, .tpl-lale, .tpl-bag) [data-part="day"] { grid-area: d; justify-self: end; font: italic 400 11cqi/1 var(--fd); }
:is(.tpl-kelagayi, .tpl-lale, .tpl-bag) [data-part="month"] { grid-area: m; justify-self: start; border: 0; padding: 0; font: italic 400 11cqi/1 var(--fd); letter-spacing: 0; text-transform: none; color: var(--acc); }
:is(.tpl-kelagayi, .tpl-lale, .tpl-bag) .cv-date--parts .cv-time { grid-area: t; margin-top: 2.6cqi; }

.cv-place { display: flex; flex-direction: column; align-items: center; gap: 1.6cqi; margin-top: 6cqi; max-width: 74cqi; }
.cv-venue { font: 600 3.4cqi/1.35 var(--fx); letter-spacing: .2em; text-transform: uppercase; padding-left: .2em; }
.cv-city { font: italic 400 5cqi/1 var(--fd); opacity: .8; }

/* ---- shared paint for the drawings ---- */
.cv .o-fill { fill: var(--fillc, var(--bg)); }
.cv .o-tint { fill: color-mix(in srgb, var(--gold) 16%, transparent); }
.cv .o-leaf { fill: color-mix(in srgb, var(--leafc, var(--gold)) 18%, transparent); }
.cv .o-acc { fill: var(--acc); }
.cv .o-hi { stroke: rgba(255,255,255,.75); }
.cv svg .o-dot { stroke: none; }
.cv-corner { position: absolute; width: 13cqi; height: 13cqi; z-index: 1; }
.cv-corner--tl { top: 2.5cqi; left: 2.5cqi; }
.cv-corner--tr { top: 2.5cqi; right: 2.5cqi; transform: scaleX(-1); }
.cv-corner--bl { bottom: 2.5cqi; left: 2.5cqi; transform: scaleY(-1); }
.cv-corner--br { bottom: 2.5cqi; right: 2.5cqi; transform: scale(-1); }

/* ==========================================================================
   Nar: engraved pomegranate under a double gold arch
   ========================================================================== */
.tpl-nar[data-v="qirmizi"] { --bg: #f7f1e8; --ink: #3a1c22; --acc: #9b1b33; --gold: #a8803a; --soft: #efe2d2; --line: rgba(168,128,58,.6); }
.tpl-nar[data-v="gece"]    { --bg: #181a36; --ink: #efe6d8; --acc: #cf3a55; --gold: #d4b06a; --soft: #23264a; --line: rgba(212,176,106,.55); --g1: #a07a34; --g2: #f6e3a8; --g3: #c9a254; --grain: var(--grain-light); }
.tpl-nar[data-v="sedef"]   { --bg: #f3e5e2; --ink: #45202b; --acc: #8c1a33; --gold: #a37b3c; --soft: #ead4d0; --line: rgba(163,123,60,.6); --g1: #85602a; --g2: #e3c47f; --g3: #b08840; }
.tpl-nar .o-fill { fill: color-mix(in srgb, var(--bg) 70%, var(--soft)); }
.tpl-nar .o-leaf { fill: color-mix(in srgb, var(--gold) 10%, transparent); }
.tpl-nar .o-pith { fill: color-mix(in srgb, var(--gold) 18%, var(--bg)); }
.tpl-nar .o-lens { fill: color-mix(in srgb, var(--acc) 30%, var(--bg)); }
.tpl-nar .o-seed { fill: var(--acc); }
.tpl-nar .o-facet { stroke: color-mix(in srgb, var(--acc) 55%, black); stroke-width: .35; opacity: .5; }
.tpl-nar .o-shine { fill: rgba(255,255,255,.75); stroke: none; }
.tpl-nar .cv-arch { inset: 6.5cqi; border: .35cqi solid var(--gold); border-radius: 50cqi 50cqi .8cqi .8cqi / 50cqi 50cqi .8cqi .8cqi; }
.tpl-nar .cv-arch::after { content: ""; position: absolute; inset: 1.5cqi; border: .16cqi solid var(--line); border-radius: inherit; }
.tpl-nar .cv-arch::before {
  content: ""; position: absolute; z-index: 1; top: -1.3cqi; left: 50%; width: 2.2cqi; height: 2.2cqi;
  background: var(--gold); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 1cqi var(--bg);
}
.tpl-nar .cv-body { padding: 19cqi 13cqi 15cqi; }
.tpl-nar .cv-names { font-size: 15.5cqi; }

/* ==========================================================================
   Kəlağayı: an ivory card laid on buta-woven silk
   ========================================================================== */
.tpl-kelagayi { --fn: "Pinyon Script", cursive; }
.tpl-kelagayi[data-v="zeferan"]  { --bg: #c08a35; --weave: #9f6d22; --panel: #fbf6ec; --ink: #2c1a24; --acc: #8a1a30; }
.tpl-kelagayi[data-v="lacivert"] { --bg: #1f2a58; --weave: #33407a; --panel: #f8f3ea; --ink: #1f2346; --acc: #1f2a58; }
.tpl-kelagayi[data-v="ag"]       { --bg: #ebe5e1; --weave: #d8cfc9; --panel: #fffdf9; --ink: #2c1a24; --acc: #9b1b33; }
.tpl-kelagayi { --fillc: var(--panel); }
.cv.tpl-kelagayi { background-image: linear-gradient(115deg, rgba(255,255,255,.14), transparent 40%, rgba(255,255,255,.08) 60%, transparent), var(--grain-dark); }
.tpl-kelagayi .o-weave { fill: none; stroke: var(--weave); stroke-width: 1.2; }
.tpl-kelagayi .o-weave-dot { fill: var(--weave); }
.tpl-kelagayi .cv-body {
  inset: 7cqi; padding: 12cqi 9cqi 10cqi;
  background: var(--panel) var(--grain-dark); border: .3cqi solid var(--gold);
  box-shadow: 0 2cqi 6cqi -2cqi rgba(30,15,10,.35);
}
.tpl-kelagayi .cv-body::before { content: ""; position: absolute; inset: 1.6cqi; border: .16cqi solid var(--line); pointer-events: none; }
.tpl-kelagayi .orn-rosette { width: 34cqi; margin-bottom: 5cqi; }
.tpl-kelagayi .cv-names { font-weight: 400; font-size: 13.5cqi; line-height: 1.15; color: var(--acc); gap: 0; }
.tpl-kelagayi .cv-amp { font-size: 7cqi; margin: -1cqi 0; }
.tpl-kelagayi .cv-date--parts { margin-top: 6cqi; }
/* Cormorant italic has no lining figures; EB Garamond italic does */
.tpl-kelagayi .cv-date--parts :is([data-part="day"], [data-part="month"]) { font-family: "EB Garamond", serif; font-size: 10cqi; }

/* ==========================================================================
   Səadət: modern minimal. Corner marks, a hairline monogram, spaced capitals
   ========================================================================== */
.tpl-seadet { --fn: "Josefin Sans", sans-serif; --fx: "Josefin Sans", sans-serif; --fd: "Playfair Display", serif; --fb: "Josefin Sans", sans-serif; }
.tpl-seadet[data-v="ag"]     { --bg: #fbfaf6; --ink: #26252b; --acc: #8a7656; --gold: #8a7656; --line: rgba(138,118,86,.45); --g1: #8d7a57; --g2: #d9c9a3; --g3: #a8936b; }
.tpl-seadet[data-v="qrafit"] { --bg: #2c2e34; --ink: #eeebe4; --acc: #c9b48a; --gold: #c9b48a; --line: rgba(201,180,138,.4); --g1: #9d8a64; --g2: #efe0bb; --g3: #c2ad83; --grain: var(--grain-light); }
.tpl-seadet[data-v="mavi"]   { --bg: #dfe6ee; --ink: #1f2b3d; --acc: #4f6889; --gold: #4f6889; --line: rgba(79,104,137,.4); --g1: #7d8ea6; --g2: #eef2f7; --g3: #a7b5c8; }
/* four corner marks instead of a full frame */
.tpl-seadet .cv-frame {
  inset: 6cqi;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 9cqi .25cqi, linear-gradient(var(--gold), var(--gold)) top left / .25cqi 9cqi,
    linear-gradient(var(--gold), var(--gold)) top right / 9cqi .25cqi, linear-gradient(var(--gold), var(--gold)) top right / .25cqi 9cqi,
    linear-gradient(var(--gold), var(--gold)) bottom left / 9cqi .25cqi, linear-gradient(var(--gold), var(--gold)) bottom left / .25cqi 9cqi,
    linear-gradient(var(--gold), var(--gold)) bottom right / 9cqi .25cqi, linear-gradient(var(--gold), var(--gold)) bottom right / .25cqi 9cqi;
  background-repeat: no-repeat;
}
.tpl-seadet .cv-body { padding: 16cqi 12cqi 14cqi; }
.cv-monoring { position: relative; width: 36cqi; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 9cqi; flex: none; }
.cv-monoring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tpl-seadet .cv-mono { font: italic 400 11cqi/1 var(--fd); color: var(--gold); word-spacing: .6em; letter-spacing: 0; }
.tpl-seadet .cv-intro { font: 300 3.2cqi/1.7 var(--fx); font-style: normal; letter-spacing: .3em; text-transform: uppercase; max-width: 64cqi; margin-bottom: 7cqi; padding-left: .3em; }
.tpl-seadet .cv-names { font: 300 9cqi/1.1 var(--fn); letter-spacing: .24em; text-transform: uppercase; gap: 3cqi; padding-left: .24em; }
.tpl-seadet .cv-amp { font: italic 400 7.5cqi/1 var(--fd); text-transform: none; letter-spacing: 0; }
.tpl-seadet .cv-amp::before, .tpl-seadet .cv-amp::after { width: 6cqi; }
.tpl-seadet .cv-date--parts { margin-top: 9cqi; }
.tpl-seadet .cv-venue { font-weight: 400; letter-spacing: .26em; }
.tpl-seadet .cv-city { font: 300 3.4cqi/1 var(--fx); font-style: normal; letter-spacing: .26em; text-transform: uppercase; }

/* ==========================================================================
   Lalə: botanical tulips rising from the bottom edge
   ========================================================================== */
.tpl-lale { --fn: "Great Vibes", cursive; --fd: "EB Garamond", serif; --fx: "EB Garamond", serif; --fb: "EB Garamond", serif; }
.tpl-lale[data-v="cehrayi"] { --bg: #fbf1ee; --ink: #4a2630; --acc: #a8475a; --petal: #e08a98; --petal2: #c95a6f; --leafc: #6f8f5c; }
.tpl-lale[data-v="yasil"]   { --bg: #eff0e6; --ink: #2f3523; --acc: #8a5a2b; --petal: #e8b06a; --petal2: #d4843c; --leafc: #5c6e3c; }
.tpl-lale .cv-body { justify-content: flex-start; padding: 19cqi 11cqi 0; }
.tpl-lale .cv-intro { font: 500 3.2cqi/1.6 var(--fx); font-style: normal; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 4cqi; padding-left: .28em; }
.tpl-lale .cv-names { font-weight: 400; font-size: 17cqi; line-height: 1.05; color: var(--acc); gap: 0; }
.tpl-lale .cv-amp { font-size: 7cqi; margin: -1cqi 0; }
.tpl-lale .cv-date--parts { margin-top: 5cqi; }
.tpl-lale .cv-place { margin-top: 4cqi; }
.tpl-lale .orn-bouquet { position: absolute; left: 50%; bottom: -6cqi; width: 72cqi; height: auto; translate: -50% 0; z-index: -1; }
.tpl-lale .o-petal { fill: color-mix(in srgb, var(--petal) 55%, transparent); }
.tpl-lale .o-petal2 { fill: color-mix(in srgb, var(--petal2) 70%, transparent); }
.tpl-lale .o-stemline { stroke: color-mix(in srgb, var(--leafc) 80%, var(--gold)); }
.tpl-lale .o-leaf { fill: color-mix(in srgb, var(--leafc) 30%, transparent); }

/* ==========================================================================
   Xına gecəsi: a henna mandala over the top, the name in gold script below
   ========================================================================== */
.tpl-xina { --fn: "Imperial Script", cursive; }
.tpl-xina[data-v="qirmizi"] { --bg: #6e0f1d; --ink: #f7e6d2; --acc: #f0cf8a; --gold: #d9b36a; --line: rgba(217,179,106,.5); --g1: #a07a34; --g2: #f6e3a8; --g3: #c9a254; --grain: var(--grain-light); }
.tpl-xina[data-v="narinci"] { --bg: #94381a; --ink: #fff0e0; --acc: #f6dc9c; --gold: #e6c07a; --line: rgba(230,192,122,.5); --g1: #b08a44; --g2: #fbecbf; --g3: #d8b469; --grain: var(--grain-light); }
.tpl-xina svg.orn-henna { inset: auto; left: -18cqi; top: -36cqi; width: 136cqi; height: 136cqi; }
.tpl-xina .o-tint { fill: color-mix(in srgb, var(--gold) 12%, transparent); }
.tpl-xina .o-acc { fill: var(--acc); }
.tpl-xina .cv-body { justify-content: flex-end; padding: 0 12cqi 17cqi; }
.tpl-xina .cv-intro { margin-bottom: 2cqi; }
.tpl-xina .cv-names {
  font-weight: 400; font-size: 23cqi; line-height: 1.1;
  background: linear-gradient(100deg, var(--g1), var(--g2) 35%, var(--g3) 55%, var(--g2) 75%, var(--g1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tpl-xina .cv-names > span { padding: 0 2cqi; }
.tpl-xina .cv-date--parts [data-part="day"] { color: var(--acc); }

/* ==========================================================================
   Şirvan: a woven carpet border around an ivory field
   ========================================================================== */
.tpl-sirvan { --fn: "Libre Caslon Display", serif; --fd: "Libre Caslon Display", serif; --fb: "EB Garamond", serif; }
.tpl-sirvan[data-v="lacivert"] { --bg: #1c2752; --red: #a8323e; --c-gold: #d4a957; --blue: #1c2752; --field: #f3ead8; --fink: #1c2752; --ink: #f3ead8; --acc: #a8323e; --gold: #b8913f; --line: rgba(28,39,82,.35); --grain: var(--grain-light); }
.tpl-sirvan[data-v="bordo"]    { --bg: #5e1624; --red: #1c2752; --c-gold: #d4a957; --blue: #5e1624; --field: #f3ead8; --fink: #4a1220; --ink: #f3ead8; --acc: #5e1624; --gold: #b8913f; --line: rgba(94,22,36,.35); --grain: var(--grain-light); }
.tpl-sirvan .c-red { fill: var(--red); }
.tpl-sirvan .c-gold { fill: var(--c-gold); }
.tpl-sirvan .c-blue { fill: var(--blue); }
.tpl-sirvan .c-field { fill: var(--field); }
.tpl-sirvan .c-line { fill: none; stroke: var(--field); stroke-width: 1.2; }
/* border: two motif layers drawn with masks so they take the variant's colours and scale with the card */
.tpl-sirvan .cv-frame { inset: 3cqi; }
.tpl-sirvan .cv-frame::before, .tpl-sirvan .cv-frame::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: var(--tile) 0 0 / 9cqi 9cqi space; mask: var(--tile) 0 0 / 9cqi 9cqi space;
}
.tpl-sirvan .cv-frame::before {
  background: var(--red);
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5 18.5 10 10 18.5 1.5 10Z M10 6 14 10 10 14 6 10Z M10 0h0'/%3E%3Cpath d='M9 0h2v2H9zM9 18h2v2H9zM0 9h2v2H0zM18 9h2v2h-2z'/%3E%3C/svg%3E");
}
.tpl-sirvan .cv-frame::after {
  background: var(--c-gold);
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.6 8.6h2.8v2.8H8.6zM0 0h3v1H1v2H0zM20 0v3h-1V1h-2V0zM0 20v-3h1v2h2v1zM20 20h-3v-1h2v-2h1z'/%3E%3C/svg%3E");
}
.tpl-sirvan .cv-body {
  inset: 13cqi 11cqi; padding: 11cqi 7cqi 9cqi; z-index: 1;
  background: var(--field) var(--grain-dark); color: var(--fink);
  outline: .5cqi solid var(--c-gold); outline-offset: 1.2cqi; box-shadow: 0 0 0 1.2cqi var(--red);
}
.tpl-sirvan .cv-corner { width: 11cqi; height: 11cqi; top: 0; left: 0; }
.tpl-sirvan .cv-corner--tr { left: auto; right: 0; }
.tpl-sirvan .cv-corner--bl { top: auto; bottom: 0; }
.tpl-sirvan .cv-corner--br { top: auto; left: auto; right: 0; bottom: 0; }
.tpl-sirvan .orn-gul { width: 30cqi; margin-bottom: 6cqi; }
.tpl-sirvan .cv-intro { font-family: "EB Garamond", serif; }
.tpl-sirvan .cv-names { font-weight: 400; font-size: 11cqi; line-height: 1.1; color: var(--fink); }
.tpl-sirvan .cv-amp { color: var(--acc); font-family: "EB Garamond", serif; }
.tpl-sirvan .cv-date--parts { width: 66cqi; }
.tpl-sirvan .cv-date--parts [data-part="day"] { font-size: 11cqi; color: var(--acc); }

/* ==========================================================================
   Mərmər: veined marble with an Art Deco gold frame
   ========================================================================== */
.tpl-mermer { --fn: "Playfair Display", serif; --fd: "Playfair Display", serif; --fx: "Josefin Sans", sans-serif; --fb: "EB Garamond", serif; }
.tpl-mermer[data-v="boz"]    { --bg: #f1efec; --ink: #2d2b33; --acc: #2d2b33; --vein: rgba(110,104,118,.6); --vein2: rgba(150,144,160,.4); }
.tpl-mermer[data-v="zumrud"] { --bg: #24493f; --ink: #f1ece0; --acc: #f1ece0; --gold: #d4b06a; --line: rgba(212,176,106,.5); --vein: rgba(200,226,210,.4); --vein2: rgba(8,28,22,.45); --g1: #a07a34; --g2: #f6e3a8; --g3: #c9a254; --grain: var(--grain-light); }
.tpl-mermer .cv-frame { inset: 7cqi; border: .3cqi solid var(--gold); }
.tpl-mermer .cv-frame::before {
  content: ""; position: absolute; inset: 1.6cqi; border: .16cqi solid var(--line);
  clip-path: polygon(6cqi 0, calc(100% - 6cqi) 0, 100% 6cqi, 100% calc(100% - 6cqi), calc(100% - 6cqi) 100%, 6cqi 100%, 0 calc(100% - 6cqi), 0 6cqi);
}
.tpl-mermer .cv-frame::after {
  content: ""; position: absolute; left: 50%; top: -2.4cqi; width: 4.4cqi; height: 4.4cqi; translate: -50% 0;
  border: .3cqi solid var(--gold); background: var(--bg); rotate: 45deg;
}
.tpl-mermer .cv-body { padding: 20cqi 13cqi 16cqi; }
.tpl-mermer .cv-intro { font: 400 3.1cqi/1.7 var(--fx); font-style: normal; letter-spacing: .32em; text-transform: uppercase; margin-bottom: 8cqi; padding-left: .32em; }
.tpl-mermer .cv-names { font: 400 14cqi/1 var(--fn); letter-spacing: .01em; gap: 2.4cqi; }
.tpl-mermer .cv-amp { font: italic 400 8cqi/1 var(--fd); }
.tpl-mermer .cv-date--parts { margin-top: 9cqi; }
.tpl-mermer .cv-date--parts [data-part="day"] { font: 400 3.6cqi/1 var(--fx); }
.tpl-mermer .cv-venue { font-family: var(--fx); font-weight: 400; letter-spacing: .26em; }
.tpl-mermer .cv-city { font: italic 400 5cqi/1 var(--fd); }

/* ==========================================================================
   Ay işığı: night sky, an engraved crescent top right, text set left
   ========================================================================== */
.tpl-ayisigi { --fn: "Fraunces", serif; --fd: "Fraunces", serif; --fx: "Josefin Sans", sans-serif; --fb: "Fraunces", serif; }
.tpl-ayisigi[data-v="gece"]  { --bg: #141632; --bg2: #262a58; --ink: #ece8f4; --acc: #e3cf9a; --gold: #d8c08a; --line: rgba(216,192,138,.45); --g1: #a3864a; --g2: #f7e7b6; --g3: #cdb27a; --grain: var(--grain-light); }
.tpl-ayisigi[data-v="gumus"] { --bg: #dfe2ea; --bg2: #f1f2f6; --ink: #1f2140; --acc: #3d4076; --gold: #6f7596; --line: rgba(61,64,118,.35); --g1: #4a5078; --g2: #9ea5c4; --g3: #646b92; }
.cv.tpl-ayisigi { background-image: var(--grain), linear-gradient(to bottom, var(--bg), var(--bg2)); }
.tpl-ayisigi .cv-moon { position: absolute; z-index: -1; top: -8cqi; right: -12cqi; width: 66cqi; height: auto; }
.tpl-ayisigi .o-moon { fill: color-mix(in srgb, var(--gold) 12%, transparent); }
.tpl-ayisigi .o-glow { fill: color-mix(in srgb, var(--gold) 7%, transparent); }
.tpl-ayisigi .cv-body { align-items: flex-start; justify-content: flex-end; text-align: left; padding: 0 12cqi 18cqi 14cqi; }
.tpl-ayisigi .cv-body::before { content: ""; position: absolute; left: 8cqi; bottom: 18cqi; height: 92cqi; width: .25cqi; background: linear-gradient(transparent, var(--gold) 25%, var(--gold) 75%, transparent); }
.tpl-ayisigi .cv-intro { font: italic 300 5.4cqi/1.35 var(--fd); margin-bottom: 5cqi; }
.tpl-ayisigi .cv-names { align-items: flex-start; font: italic 300 15cqi/1 var(--fn); gap: 1cqi; }
.tpl-ayisigi .cv-amp { font: italic 300 8cqi/1 var(--fd); }
.tpl-ayisigi .cv-amp::before { display: none; }
.tpl-ayisigi .cv-amp::after { width: 16cqi; }
.tpl-ayisigi .cv-date--parts { justify-content: flex-start; margin-top: 8cqi; }
.tpl-ayisigi .cv-date--parts .cv-time { text-align: left; }
.tpl-ayisigi .cv-place { align-items: flex-start; margin-top: 5cqi; }
.tpl-ayisigi .cv-venue { font-family: var(--fx); font-weight: 400; letter-spacing: .24em; padding-left: 0; }

/* ==========================================================================
   Bağ: names inside an olive wreath
   ========================================================================== */
.tpl-bag { --fn: "Allura", cursive; --fd: "EB Garamond", serif; --fx: "EB Garamond", serif; --fb: "EB Garamond", serif; }
.tpl-bag[data-v="yasil"]   { --bg: #f4f1e6; --ink: #263022; --acc: #4f5f37; --leafc: #6f8a5a; --olive: #4f5f37; }
.tpl-bag[data-v="saftali"] { --bg: #f8e6da; --ink: #45302a; --acc: #9a4e30; --leafc: #7d8b5c; --olive: #9a4e30; }
.tpl-bag .o-leaf { fill: color-mix(in srgb, var(--leafc) 32%, transparent); }
.tpl-bag .o-acc { fill: color-mix(in srgb, var(--olive) 75%, transparent); }
.tpl-bag .o-ribbon { fill: color-mix(in srgb, var(--acc) 22%, transparent); }
.tpl-bag .cv-body { padding: 14cqi 11cqi 14cqi; }
.tpl-bag .cv-intro { order: -1; font: 500 3.2cqi/1.6 var(--fx); font-style: normal; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 4cqi; padding-left: .28em; }
.tpl-bag .cv-wreath { width: 86cqi; height: auto; margin-bottom: -86cqi; flex: none; }
.tpl-bag .cv-names { height: 86cqi; justify-content: center; font-weight: 400; font-size: 14.5cqi; line-height: 1.05; color: var(--acc); gap: 0; }
.tpl-bag .cv-amp { font-size: 6.5cqi; margin: -.5cqi 0; }
.tpl-bag .cv-amp::before, .tpl-bag .cv-amp::after { width: 6cqi; }
.tpl-bag .cv-date--parts { margin-top: 5cqi; }

/* ==========================================================================
   Bayram (children's birthday): line balloons, soft colours, a big name and age
   ========================================================================== */
.tpl-bayram { --fn: "Unbounded", sans-serif; --fd: "Fraunces", serif; --fx: "Josefin Sans", sans-serif; --fb: "Josefin Sans", sans-serif; }
.tpl-bayram[data-v="mavi"] { --bg: #dbe8f6; --ink: #1d2b55; --acc: #2a4fa8; --b1: #f59a8b; --b2: #f6c75a; --b3: #8fd1b8; --badge: #f6c75a; --badge-ink: #1d2b55; }
.tpl-bayram[data-v="sari"] { --bg: #fbecc0; --ink: #3b2a55; --acc: #6a46c9; --b1: #f08a8a; --b2: #8f7be0; --b3: #7cc9a8; --badge: #6a46c9; --badge-ink: #ffffff; }
.tpl-bayram .o-b1 { fill: color-mix(in srgb, var(--b1) 75%, transparent); }
.tpl-bayram .o-b2 { fill: color-mix(in srgb, var(--b2) 75%, transparent); }
.tpl-bayram .o-b3 { fill: color-mix(in srgb, var(--b3) 75%, transparent); }
.tpl-bayram .orn-confetti .o-squig { fill: none; }
.tpl-bayram .orn-balloons { width: 74cqi; margin: -6cqi 0 0; }
.tpl-bayram .cv-intro { font: italic 400 6cqi/1.3 var(--fd); margin-bottom: 3cqi; }
.tpl-bayram .cv-names { font: 600 17cqi/1 var(--fn); letter-spacing: -.02em; color: var(--acc); gap: 3cqi; }
.tpl-bayram .cv-sub {
  font: 600 4.6cqi/1 var(--fn); letter-spacing: .04em; text-transform: none; margin-top: 1cqi;
  padding: 2.4cqi 5cqi; border-radius: 99px; background: var(--badge); color: var(--badge-ink);
}
.tpl-bayram .cv-date--parts [data-part="day"] { font: 600 11cqi/1 var(--fn); }
.tpl-bayram .cv-date--parts [data-part="wday"], .tpl-bayram .cv-date--parts [data-part="month"] { font-weight: 600; }

/* ==========================================================================
   Below the cover: the reading surface of the invitation.
   .inv is the guest page (demo.php, invite.css); .cvm is the same invitation drawn
   small under each template card (render_more()). Both use the stationery style.
   --page / --page-ink / --page-acc colour the surface, --on-acc is text on the accent.
   ========================================================================== */
/* Templates whose cover text sits on an inner panel use that panel for reading. */
:is(.inv, .cvm).tpl-kelagayi { --page: var(--panel); }
:is(.inv, .cvm).tpl-sirvan { --page: var(--field); --page-ink: var(--fink); --grain: var(--grain-dark); }
:is(.inv, .cvm).tpl-ayisigi { --page: var(--bg2); }
/* Text colour on the accent: dark where the accent is light. */
:is(.inv, .cvm):is(.tpl-ayisigi[data-v="gece"], .tpl-xina, .tpl-mermer[data-v="zumrud"], .tpl-seadet[data-v="qrafit"]) { --on-acc: #1c1a3a; }

.cvm {
  --page: var(--bg); --page-ink: var(--ink); --page-acc: var(--acc);
  container-type: inline-size; display: block;
  background-color: var(--page); color: var(--page-ink); font-family: var(--fb);
  font-variant-numeric: lining-nums; text-align: center;
}
.inv[data-v] { font-variant-numeric: lining-nums; }
.cvm p, .cvm ol { margin: 0; }
.cvm-sec { display: grid; gap: 2.6cqi; justify-items: center; padding: 11cqi 9cqi; }
.cvm-sec + .cvm-sec { border-top: 1px solid var(--line); }
.cvm-text { font-size: 4.6cqi; line-height: 1.55; max-width: 72cqi; }
.cvm-muted { opacity: .7; }
.cvm-cd { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.cvm-cd div { display: grid; gap: .6cqi; padding: 3cqi 1cqi; }
.cvm-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4cqi; margin-top: 2cqi; }
.cvm-btn { display: inline-flex; align-items: center; gap: 1.6cqi; padding: 2.8cqi 5cqi; line-height: 1.2; }
.cvm-btn .icon { width: 4.4cqi; height: 4.4cqi; color: var(--page-acc); }
.cvm-btn--solid { margin-top: 2cqi; }
.cvm-btn--solid .icon { color: currentColor; }
.cvm-prog { list-style: none; padding: 0; width: 100%; text-align: left; }
.cvm-prog li { display: grid; grid-template-columns: 14cqi 1fr; gap: 3.5cqi; align-items: baseline; padding: 3cqi 0; font-size: 4.6cqi; line-height: 1.4; }
.cvm-opts { display: grid; gap: 2cqi; width: 100%; }
.cvm-opts span { padding: 3cqi; font-size: 4.4cqi; }
.cvm-foot { padding: 4cqi 0 9cqi; opacity: .55; }

/* shared stationery details (card preview and guest page) */
:is(.cvm, .inv) :is(.cvm-h, .inv-h) {
  display: flex; align-items: center; justify-content: center; gap: .9em;
  color: var(--gold); font-family: var(--fx); font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: .26em;
}
:is(.cvm, .inv) :is(.cvm-h, .inv-h)::before, :is(.cvm, .inv) :is(.cvm-h, .inv-h)::after { content: ""; flex: none; width: 2.2em; height: 1px; background: var(--line); }
.cvm .cvm-h { font-size: 3.4cqi; margin-bottom: 2cqi; }
.inv .inv-h { font-size: 14px; margin-bottom: 14px; }
:is(.cvm, .inv) :is(.cvm-kicker, .inv-kicker) { font-family: var(--fd); font-style: italic; font-weight: 400; color: var(--page-acc); }
.cvm .cvm-kicker { font-size: 8cqi; line-height: 1.2; }
.inv .inv-kicker { font-size: 32px; }
.inv .inv-text { font-size: 19px; line-height: 1.6; }
.inv .inv-muted { font-size: 16px; }
:is(.cvm, .inv) :is(.cvm-big, .inv-big) { font-family: var(--fd); font-weight: 300; }
.cvm .cvm-big { font-size: 10cqi; line-height: 1.15; }
.inv .inv-big { font-size: 40px; }
:is(.cvm, .inv) :is(.cvm-venue, .inv-venue) { font-family: var(--fx); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
.cvm .cvm-venue { font-size: 3.8cqi; margin-top: 1.5cqi; }
.inv .inv-venue { font-size: 15px; }
.inv .inv-sec + .inv-sec { border-top-color: var(--line); }
/* countdown: numbers between hairlines, no boxes */
.inv .cd { gap: 0; }
:is(.cvm, .inv) :is(.cvm-cd div, .cd div) { background: none; border-radius: 0; }
:is(.cvm, .inv) :is(.cvm-cd div + div, .cd div + div) { border-left: 1px solid var(--line); }
:is(.cvm, .inv) :is(.cvm-cd b, .cd span) { font-family: var(--fd); font-weight: 300; color: var(--page-acc); font-variant-numeric: lining-nums tabular-nums; }
.cvm .cvm-cd b { font-size: 12cqi; line-height: 1; }
.inv .cd span { font-size: 42px; }
:is(.cvm, .inv) :is(.cvm-cd small, .cd small) { font-family: var(--fx); text-transform: uppercase; letter-spacing: .2em; font-weight: 600; opacity: .75; }
.cvm .cvm-cd small { font-size: 2.8cqi; }
.inv .cd small { font-size: 11px; }
/* programme */
:is(.cvm, .inv) :is(.cvm-prog li, .prog li) { border-bottom: 1px solid var(--line); }
:is(.cvm, .inv) :is(.cvm-prog li:last-child, .prog li:last-child) { border-bottom: 0; }
:is(.cvm, .inv) :is(.cvm-prog b, .prog time) { font-family: var(--fd); font-weight: 400; font-style: italic; color: var(--page-acc); font-variant-numeric: lining-nums tabular-nums; }
.cvm .cvm-prog b { font-size: 5cqi; }
.inv .prog li { font-size: 18px; }
/* buttons and RSVP: square stationery edges, letter-spaced capitals */
:is(.cvm, .inv) :is(.cvm-btn, .inv-btn) {
  border: 1px solid var(--gold); border-radius: var(--r, 1px); color: var(--page-ink); background: transparent;
  font-family: var(--fx); font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
}
.cvm .cvm-btn { font-size: 3.2cqi; border-width: .25cqi; }
.inv .inv-btn { font-size: 13px; }
.inv .inv-btn .icon { color: var(--page-acc); }
.inv .inv-btn--ghost { border-color: var(--line); }
:is(.cvm, .inv) :is(.cvm-btn--solid, .inv-btn--solid) { background: var(--page-acc); border-color: var(--page-acc); color: var(--on-acc, #fff); }
.inv .inv-btn--solid .icon { color: currentColor; }
:is(.cvm, .inv) :is(.cvm-opts span, .rsvp-opts span) { border: 1px solid var(--line); border-radius: var(--r, 1px); font-family: var(--fb); font-weight: 500; }
:is(.cvm, .inv) :is(.cvm-opts .is-on, .rsvp-opts input:checked + span) { border-color: var(--page-acc); background: color-mix(in srgb, var(--page-acc) 9%, transparent); }
/* fields lean slightly towards the text colour: a touch darker on light paper, lighter on dark paper */
.inv :is(.rsvp-field input, .rsvp-field textarea) { border-radius: var(--r, 1px); border-color: var(--line); background: color-mix(in srgb, var(--page) 90%, var(--page-ink)); font-family: var(--fb); font-size: 17px; }
.inv .inv-foot a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.inv .rsvp-field { font-size: 16px; }
.inv .stepper { border-radius: var(--r, 1px); border-color: var(--line); }
.inv .stepper button { border-radius: var(--r, 1px); background: transparent; }
.cvm .cvm-foot { font-family: var(--fx); text-transform: uppercase; letter-spacing: .3em; font-size: 2.8cqi; }
/* the children's birthday stays rounded and friendly */
:is(.cvm, .inv).tpl-bayram { --r: 99px; }
:is(.cvm, .inv).tpl-bayram :is(.cvm-h, .inv-h) { font-family: var(--fn); letter-spacing: .06em; color: var(--page-acc); }
:is(.cvm, .inv).tpl-bayram :is(.cvm-cd b, .cd span, .cvm-big, .inv-big) { font-family: var(--fn); font-weight: 600; }