/* DASMA VIP — painted themes (theme.Art, body.wc). Loaded after invite.css, only for these themes.
   The invitation opens on a painted save-the-date card written out with the couple's own details,
   and the page is laid on the same watercolour paper, with the same paintings around the hero,
   the photograph and the cards.

     pjeshke  peach wash, navy fine-line flowers over loose washes, coral blossoms
              (Cormorant + Alex Brush)
     eukalipt mint wash, painted eucalyptus and sage willow, blush blossoms ("Ruajeni datën" in
              Inspiration)
     kornize  blush wash, gold geometry and gold leaf, a hexagon photograph in a gold frame
              (Playfair + Dancing Script)

   All of the artwork is our own: the papers and the paintings are generated in watercolour, the
   line flowers and the gold are SVG drawings whose strokes ink themselves in (stroke-dashoffset,
   inside the SVG), and the gold frame catches the light once when it is done. The files live in
   /static/themes/<art>/. The opening's paintings are empty slots in the markup (.wcd-1 … .wcd-8
   on the card, .wcd-p1 … .wcd-p5 by the photograph): each art below says which painting goes in
   which slot, how big, and where. */

.wc { --soft: var(--accent2); --ink: var(--text); }
.wc-pjeshke {
  --paper: url('/static/themes/pjeshke/paper.jpg'); --paper-p: url('/static/themes/pjeshke/paper-p.jpg');
  --flourish: 'Alex Brush', cursive; --soft: #8DAAA5; --line: #8DAAA5;
}
.wc-eukalipt {
  --paper: url('/static/themes/eukalipt/paper.jpg'); --paper-p: url('/static/themes/eukalipt/paper-p.jpg');
  --flourish: 'Inspiration', cursive; --soft: #7E9C92; --line: #A7B9B9;
}
.wc-kornize {
  --paper: url('/static/themes/kornize/paper.jpg'); --paper-p: url('/static/themes/kornize/paper-p.jpg');
  --flourish: 'Dancing Script', cursive; --soft: #B8955A; --line: #D9BC86;
  --gold: linear-gradient(100deg, #9c7a3f 0%, #c9a35f 30%, #e2c483 46%, #b8924f 62%, #95733a 100%);
}

/* ---------- the paper ----------
   A fixed sheet behind everything (not background-attachment: fixed, which phones ignore or
   repaint on every scroll): portrait screens get the portrait sheet. */
body.wc { background-color: var(--bg); }
body.wc::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--paper) center / cover no-repeat; }
@media (orientation: portrait) { body.wc::before { background-image: var(--paper-p); } }
.wc-pjeshke, .wc-eukalipt { font-size: 18.5px; font-weight: 500; line-height: 1.55; }

/* ---------- the opening: the painted card ---------- */
.intro-wc { --u: max(11px, min(4vw, 2.1vh)); padding: 0; display: flex; align-items: stretch; background: var(--paper-p) center / cover no-repeat, var(--bg); color: var(--ink); }
@supports (height: 1svh) { .intro-wc { --u: max(11px, min(4vw, 2.1svh)); } }
@media (orientation: landscape) { .intro-wc { background-image: var(--paper); } }
.intro-wc::before { display: none; }
html.js-ready .intro-wc { overflow: hidden; }
/* The card scrolls if a short screen cannot hold it; auto margins centre it otherwise (a centred
   flex column would cut its top off instead). The paintings are placed against the whole screen. */
.wc-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 44px 26px calc(30px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
html:not(.js-ready) .wc-card { padding-block: 56px; }
.wc-card::-webkit-scrollbar { display: none; }
.wc-words, .wc-go { position: relative; z-index: 2; text-align: center; font-size: var(--u); max-width: 34em; }
.wc-words { margin-top: auto; }
.wc-go { margin-bottom: auto; padding-top: 1.7em; }
.wc-words p { margin: 0; }

.wc-for { margin: 0 auto 1.5em !important; max-width: 22em; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.3em; line-height: 1.25; overflow-wrap: break-word; }
.wc-for span { display: block; margin-bottom: .45em; font-style: normal; font-size: .52em; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); }
.wc-for-long { font-size: 1.15em; }
.wc-for-xlong { font-size: 1em; max-width: 26em; }
.wc-names { overflow-wrap: break-word; }
.wc-names span { display: block; }
.wc-names i { display: block; font-style: normal; }
.wc-date { display: flex; justify-content: center; align-items: center; }
.wc-place { overflow-wrap: break-word; }
.wc-words .wc-names + .wc-place { margin-top: 1.3em; } /* no date yet: "to be announced" takes its place */
.wc-open { font: inherit; font-family: var(--display); font-weight: 600; font-size: .86em; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid currentColor; border-radius: 999px; padding: 1em 2.3em 1em 2.54em; cursor: pointer; transition: background .25s, color .25s, transform .45s var(--ease-back); }
.wc-open:hover { background: var(--ink); color: var(--surface); transform: translateY(-1px); }
.wc-open:active { transform: scale(.97); }
.wc-hint { margin-top: .9em; font-family: var(--display); font-size: .7em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }

/* the photograph beside the card: only on a wide screen, and only where the design has one */
.wc-photo { display: none; }
.wc-pic { position: absolute; inset: 0; overflow: hidden; background: var(--surface); }
.wc-pic img { width: 100%; height: 100%; object-fit: cover; }

/* the paintings */
.wcd { position: absolute; z-index: 1; display: none; pointer-events: none; background: no-repeat center / contain; transform-origin: var(--o, 50% 50%); }

/* Lule pjeshke: the navy line flowers stand at the card's corners, the white flower is drawn over
   the photograph's edge. */
.wc-pjeshke .wcd-1 { display: block; background-image: url('/static/themes/pjeshke/branch.svg'), url('/static/themes/pjeshke/branch-wash.webp'); aspect-ratio: 453 / 207; width: calc(var(--u) * 10.4); left: calc(var(--x0, 0px) - var(--u) * 2.6); top: calc(var(--u) * .6); --o: 0 50%; --ox: -40px; --oy: -30px; --d: .15s; }
.wc-pjeshke .wcd-2 { display: block; background-image: url('/static/themes/pjeshke/rose.svg'), url('/static/themes/pjeshke/rose-wash.webp'); aspect-ratio: 358 / 573; width: calc(var(--u) * 6.8); left: calc(var(--x0, 0px) - var(--u) * 2.2); bottom: calc(var(--u) * -1.2); --o: 40% 100%; --ox: -40px; --oy: 40px; --d: .3s; --sw: 11s; }
.wc-pjeshke .wcd-3 { display: block; background-image: url('/static/themes/pjeshke/leaves.svg'), url('/static/themes/pjeshke/leaves-wash.webp'); aspect-ratio: 382 / 410; width: calc(var(--u) * 6.8); right: calc(var(--u) * -1.4); top: calc(var(--u) * 10.6); --o: 100% 50%; --ox: 40px; --oy: -20px; --d: .45s; --sw: 10s; }
.wc-pjeshke .wcd-4 { display: block; background-image: url('/static/themes/pjeshke/tulips.svg'), url('/static/themes/pjeshke/tulips-wash.webp'); aspect-ratio: 293 / 508; width: calc(var(--u) * 4.8); right: calc(var(--u) * .4); bottom: calc(var(--u) * -.6); --o: 50% 100%; --ox: 30px; --oy: 40px; --d: .6s; --sw: 12s; }
.wc-pjeshke .wcd-5 { display: block; background-image: url('/static/themes/pjeshke/bloom-b.webp'); aspect-ratio: 131 / 147; width: calc(var(--u) * 3.6); left: calc(var(--x0, 0px) + var(--u) * 5.4); bottom: calc(var(--u) * 1.6); --ox: -20px; --oy: 30px; --d: .75s; --sw: 7s; }
.wc-pjeshke .wcd-6 { display: block; background-image: url('/static/themes/pjeshke/bloom.webp'); aspect-ratio: 124 / 132; width: calc(var(--u) * 2.9); right: calc(var(--u) * 6.2); top: calc(var(--u) * 2.4); --ox: 20px; --oy: -30px; --d: .9s; --sw: 8s; }
.wc-pjeshke .wcd-p1 { display: block; z-index: 3; background-image: url('/static/themes/pjeshke/white.svg'); aspect-ratio: 607 / 496; width: min(300px, 40%); left: -60px; top: 0; --o: 0 0; --ox: -50px; --oy: -40px; --d: .5s; }
.wc-pjeshke .wc-words { font-size: calc(var(--u) * 1.02); }
.wc-pjeshke .wc-kicker { font-family: var(--display); font-weight: 600; font-size: 1.42em; line-height: 1.45; }
.wc-pjeshke .wc-names { margin-top: 1.25em; font-family: var(--display); font-weight: 500; line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.wc-pjeshke .wc-names i { font-family: var(--flourish); font-size: 1.85em; line-height: .95; margin: .02em 0 -.08em; color: var(--soft); text-transform: none; letter-spacing: 0; }
.wc-pjeshke .wc-date { margin-top: 1.5em; font-family: var(--display); }
.wc-pjeshke .wc-date span { font-weight: 600; font-size: 1.5em; letter-spacing: .04em; text-transform: uppercase; padding-inline: .7em; line-height: 1.1; }
.wc-pjeshke .wc-date span:first-child { border-right: 2px solid var(--line); }
.wc-pjeshke .wc-date span:last-child { border-left: 2px solid var(--line); }
.wc-pjeshke .wc-date b { font-weight: 400; font-size: 3.7em; line-height: 1; padding-inline: .32em; margin-top: -.08em; }
.wc-pjeshke .wc-place { margin-top: .55em; font-family: var(--flourish); font-size: 1.55em; line-height: 1.25; letter-spacing: .02em; }
.wc-pjeshke .wc-date + .wc-place, .wc-pjeshke .wc-names + .wc-place { margin-top: 1.3em; }

/* Eukalipt: eucalyptus hangs from the top corner and rises from the bottom one, leaves and blush
   buds are scattered across the card, "Ruajeni datën" is written large in the middle. */
.wc-eukalipt .wcd-1 { display: block; background-image: url('/static/themes/eukalipt/corner-tl.webp'); aspect-ratio: 760 / 460; width: calc(var(--u) * 15.5); left: 0; top: 0; --o: 0 0; --ox: -50px; --oy: -40px; --d: .1s; --sw: 12s; }
.wc-eukalipt .wcd-2 { display: block; background-image: url('/static/themes/eukalipt/corner-br.webp'); aspect-ratio: 720 / 521; width: calc(var(--u) * 14); right: 0; bottom: 0; --o: 100% 100%; --ox: 50px; --oy: 40px; --d: .25s; --sw: 13s; }
.wc-eukalipt .wcd-3 { display: block; background-image: url('/static/themes/eukalipt/leaves-c.webp'); aspect-ratio: 409 / 390; width: calc(var(--u) * 6.6); right: calc(var(--u) * -1.6); top: calc(var(--u) * -1.2); transform: rotate(150deg); --ox: 40px; --oy: 0px; --d: .45s; --sw: 10s; }
.wc-eukalipt .wcd-4 { display: block; background-image: url('/static/themes/eukalipt/leaves-a.webp'); aspect-ratio: 359 / 364; width: calc(var(--u) * 6); left: calc(var(--u) * -2.6); bottom: calc(var(--u) * 5); --o: 0 100%; --ox: -40px; --oy: 20px; --d: .55s; --sw: 11s; }
.wc-eukalipt .wcd-5 { display: block; background-image: url('/static/themes/eukalipt/bloom-b.webp'); aspect-ratio: 180 / 205; width: calc(var(--u) * 4.4); left: calc(var(--u) * 4.6); bottom: calc(var(--u) * -.6); --o: 50% 100%; --ox: -10px; --oy: 40px; --d: .7s; --sw: 7s; }
.wc-eukalipt .wcd-6 { display: block; background-image: url('/static/themes/eukalipt/bloom-a.webp'); aspect-ratio: 131 / 147; width: calc(var(--u) * 3.1); right: calc(var(--u) * 2.4); top: calc(var(--u) * 5.4); --ox: 30px; --oy: -30px; --d: .8s; --sw: 8s; }
.wc-eukalipt .wcd-7 { display: block; background-image: url('/static/themes/eukalipt/leaf.webp'); aspect-ratio: 82 / 86; width: calc(var(--u) * 2.1); left: calc(var(--u) * 2); top: calc(var(--u) * 15); transform: rotate(-108deg); --ox: -30px; --oy: 0px; --d: .9s; --sw: 6s; }
.wc-eukalipt .wcd-8 { display: block; background-image: url('/static/themes/eukalipt/bloom-c.webp'); aspect-ratio: 124 / 132; width: calc(var(--u) * 2.4); right: calc(var(--u) * 1.2); bottom: calc(var(--u) * 6.5); --ox: 30px; --oy: 20px; --d: 1s; --sw: 7s; }
.wc-eukalipt .wc-photo { display: none !important; }
.wc-eukalipt .wc-kicker { font-family: var(--display); font-weight: 500; font-size: 1.22em; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.wc-eukalipt .wc-save { margin: .28em 0 .32em; font-family: var(--flourish); font-size: 4.6em; line-height: 1.08; color: var(--ink); }
.wc-eukalipt .wc-names { font-family: var(--display); font-weight: 500; line-height: 1.15; letter-spacing: .07em; text-transform: uppercase; }
.wc-eukalipt .wc-names span, .wc-eukalipt .wc-names i { display: inline; }
.wc-eukalipt .wc-names i { margin-inline: .28em; color: var(--soft); }
.wc-eukalipt .wc-date { margin-top: 1.5em; font-family: var(--display); font-weight: 500; font-size: 1.75em; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; }
.wc-eukalipt .wc-date > * { padding-inline: .75em; font-weight: 500; }
.wc-eukalipt .wc-date b { order: 1; border-right: 2px solid var(--line); }
.wc-eukalipt .wc-date span:first-child { order: 2; border-right: 2px solid var(--line); }
.wc-eukalipt .wc-date span:last-child { order: 3; }
.wc-eukalipt .wc-place { margin-top: .5em; font-family: var(--display); font-weight: 500; font-size: .98em; letter-spacing: .08em; text-transform: uppercase; line-height: 1.45; }
.wc-eukalipt .wc-date + .wc-place { margin-top: 1.6em; }

/* Kornizë ari: gold corners, gold confetti and gold leaf around the words; beside them, the
   photograph cut as a hexagon inside the gold geometric frame. */
.wc-kornize .wcd-1 { display: block; background-image: url('/static/themes/kornize/corner-tl.svg'); aspect-ratio: 1; width: calc(var(--u) * 9); left: 0; top: 0; --o: 0 0; --ox: -40px; --oy: -40px; --d: .1s; --sw: 14s; }
.wc-kornize .wcd-2 { display: block; background-image: url('/static/themes/kornize/corner-br.svg'); aspect-ratio: 1; width: calc(var(--u) * 9); right: 0; bottom: 0; --o: 100% 100%; --ox: 40px; --oy: 40px; --d: .2s; --sw: 14s; }
.wc-kornize .wcd-3 { display: block; background-image: url('/static/themes/kornize/corner-tr.svg'); aspect-ratio: 1; width: calc(var(--u) * 9); right: 0; top: 0; --o: 100% 0; --ox: 40px; --oy: -40px; --d: .3s; --sw: 14s; }
.wc-kornize .wcd-4 { display: block; background-image: url('/static/themes/kornize/corner-bl.svg'); aspect-ratio: 1; width: calc(var(--u) * 9); left: 0; bottom: 0; --o: 0 100%; --ox: -40px; --oy: 40px; --d: .4s; --sw: 14s; }
.wc-kornize .wcd-5 { display: block; background-image: url('/static/themes/kornize/confetti-up.svg'); aspect-ratio: 700 / 208; width: calc(var(--u) * 17); right: 0; bottom: calc(var(--u) * 1.4); --ox: 30px; --oy: 30px; --d: .7s; --sw: 9s; }
.wc-kornize .wcd-6 { display: block; background-image: url('/static/themes/kornize/pink.webp'); aspect-ratio: 520 / 547; width: calc(var(--u) * 8.5); left: calc(var(--u) * -3.4); top: calc(var(--u) * 15.5); transform: rotate(-24deg); --o: 0 50%; --ox: -50px; --oy: 0px; --d: .55s; --sw: 10s; }
.wc-kornize .wcd-7 { display: block; background-image: url('/static/themes/kornize/gold-d.svg'); aspect-ratio: 317 / 457; width: calc(var(--u) * 4.4); right: calc(var(--u) * .2); top: calc(var(--u) * 17.5); transform: rotate(-14deg); --o: 50% 100%; --ox: 40px; --oy: -10px; --d: .85s; --sw: 8s; }
.wc-kornize .wcd-8 { display: block; background-image: url('/static/themes/kornize/confetti.svg'); aspect-ratio: 700 / 208; width: calc(var(--u) * 14); left: calc(var(--u) * 1); top: calc(var(--u) * 1.2); --ox: -30px; --oy: -30px; --d: .9s; --sw: 9s; }
.wc-kornize .wc-pic { inset: auto; left: 50%; top: 50%; width: min(34vw, 56vh); height: auto; aspect-ratio: 1040 / 1243; translate: -50% -50%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* the frame is drawn on a square canvas 1.81 times the photograph's width, centred on it, so its
   gold lines run just outside the hexagon */
.wc-kornize .wcd-p1 { display: block; z-index: 3; background-image: url('/static/themes/kornize/frame.svg'); aspect-ratio: 1; width: calc(min(34vw, 56vh) * 1.81); left: 50%; top: 50%; translate: -50% -50%; --ox: 0px; --oy: 0px; --d: .35s; --sw: 16s; animation-name: wcSpinIn, wcSway; }
.wc-kornize .wcd-p2 { display: block; z-index: 4; background-image: url('/static/themes/kornize/pink.webp'); aspect-ratio: 520 / 547; width: min(18vw, 30vh); left: calc(50% - min(34vw, 56vh) * .78); bottom: calc(50% - min(34vw, 56vh) * .78); transform: rotate(-118deg) scaleX(-1); --ox: -50px; --oy: 40px; --d: .6s; --sw: 11s; }
.wc-kornize .wcd-p3 { display: block; z-index: 4; background-image: url('/static/themes/kornize/gold-b.svg'); aspect-ratio: 483 / 324; width: min(16vw, 27vh); right: calc(50% - min(34vw, 56vh) * .86); top: calc(50% - min(34vw, 56vh) * .78); transform: rotate(-30deg); --ox: 50px; --oy: -40px; --d: .75s; --sw: 9s; }
.wc-kornize .wcd-p4 { display: block; z-index: 4; background-image: url('/static/themes/kornize/gold-a.svg'); aspect-ratio: 347 / 240; width: min(11vw, 18vh); right: calc(50% - min(34vw, 56vh) * .74); bottom: calc(50% - min(34vw, 56vh) * .66); transform: rotate(18deg); --ox: 40px; --oy: 40px; --d: .9s; --sw: 10s; }
.wc-kornize .wcd-p5 { display: block; z-index: 2; background-image: url('/static/themes/kornize/confetti.svg'); aspect-ratio: 700 / 208; width: min(30vw, 48vh); left: 4%; top: 6%; transform: rotate(180deg); --ox: -30px; --oy: -30px; --d: .5s; --sw: 9s; }
.wc-kornize .wc-words { font-size: calc(var(--u) * 1.04); }
.wc-kornize .wc-save { font-family: var(--display); font-weight: 400; font-size: 1.62em; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.wc-kornize .wc-kicker { margin-top: .7em; font-family: var(--display); font-weight: 500; font-size: .92em; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.wc-kornize .wc-rule { display: block; width: 6.6em; aspect-ratio: 210 / 45; margin: 1.1em auto 1.35em; background: url('/static/themes/kornize/divider.svg') center / contain no-repeat; }
.wc-kornize .wc-names { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: .03em; text-transform: uppercase; }
.wc-kornize .wc-names i { font-size: .42em; letter-spacing: .14em; padding-block: .6em; line-height: 1; }
.wc-kornize .wc-date { margin-top: 1.25em; font-family: var(--display); }
.wc-kornize .wc-date span { font-size: .92em; letter-spacing: .18em; text-transform: uppercase; padding-inline: 1em; }
.wc-kornize .wc-date span:first-child { border-right: 1px solid var(--line); }
.wc-kornize .wc-date span:last-child { border-left: 1px solid var(--line); }
.wc-kornize .wc-date b { font-weight: 400; font-size: 2.3em; line-height: 1; padding-inline: .45em; }
.wc-kornize .wc-place { margin-top: .3em; font-family: var(--flourish); font-size: 1.22em; letter-spacing: .04em; line-height: 1.35; }
.wc-kornize .wc-date + .wc-place { margin-top: 1.2em; }
.wc-kornize .wc-open { font-weight: 500; letter-spacing: .2em; font-size: .78em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wc-kornize .wc-names span, .wc-kornize .wc-save { background: var(--gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}

/* long names step down a size, and a short phone tightens the card's rhythm, so the button stays
   on the first screen */
.wc-long.intro-wc { --nk: .78; }
.wc-pjeshke .wc-names, .wc-eukalipt .wc-names, .wc-kornize .wc-names { font-size: calc(var(--nf) * var(--nk, 1)); }
.wc-pjeshke .wc-names { --nf: 3.3em; } .wc-eukalipt .wc-names { --nf: 2.15em; } .wc-kornize .wc-names { --nf: 2.65em; }
@media (max-height: 720px) {
  .wc-card { padding-top: 30px; }
  .wc-pjeshke .wc-words { font-size: calc(var(--u) * .95); }
  .wc-pjeshke .wc-names { margin-top: .9em; }
  .wc-pjeshke .wc-date { margin-top: 1.1em; }
  .wc-for { margin-bottom: 1.1em !important; }
  .wc-go { padding-top: 1.3em; }
}

/* A wide screen sets the photograph beside the card, as the designs do: on the left of the peach
   card, on the right of the gold one. The card's paintings then keep to its own half. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .intro-wc { --u: max(12px, min(1.25vw, 2.15vh)); }
  .intro-wc.has-photo .wc-photo { display: block; position: relative; flex: 0 0 50%; }
  .wc-pjeshke .intro-wc.has-photo { --x0: 50vw; }
  /* without a photograph the peach card has the whole screen: its flowers grow to match */
  .wc-pjeshke .intro-wc:not(.has-photo) .wcd-1 { width: calc(var(--u) * 17); }
  .wc-pjeshke .intro-wc:not(.has-photo) .wcd-2 { width: calc(var(--u) * 10.5); }
  .wc-pjeshke .intro-wc:not(.has-photo) .wcd-3 { width: calc(var(--u) * 11); top: calc(var(--u) * 9); right: calc(var(--u) * -3); }
  .wc-pjeshke .intro-wc:not(.has-photo) .wcd-4 { width: calc(var(--u) * 7.5); }
  .wc-kornize .intro-wc.has-photo .wc-photo { order: 2; }
  .wc-kornize .intro-wc.has-photo .wc-pic { background: transparent; }
  .wc-kornize .intro-wc.has-photo .wcd-5 { right: 2vw; }
  .wc-kornize .intro-wc.has-photo .wcd-7 { right: auto; left: calc(50vw - var(--u) * 6); }
  .wc-eukalipt .wcd-1 { width: calc(var(--u) * 30); }
  .wc-eukalipt .wcd-2 { width: calc(var(--u) * 27); }
  .wc-eukalipt .wcd-3 { right: 18vw; top: auto; bottom: 6vh; }
  .wc-eukalipt .wcd-4 { left: 16vw; bottom: auto; top: 8vh; transform: rotate(160deg); }
  .wc-eukalipt .wcd-5 { left: 30vw; bottom: 3vh; }
  .wc-eukalipt .wcd-6 { right: 30vw; top: 5vh; }
  .wc-eukalipt .wcd-7 { left: 9vw; top: 52vh; }
  .wc-eukalipt .wcd-8 { right: 9vw; bottom: auto; top: 42vh; }
  .wc-eukalipt .wc-words { font-size: calc(var(--u) * 1.24); }
  .wc-eukalipt .wc-save { font-size: 6.2em; }
  .wc-pjeshke .wc-words, .wc-kornize .wc-words { font-size: calc(var(--u) * 1.22); }
  .wc-go { font-size: calc(var(--u) * 1.1); }
}

/* The entrance: every painting settles onto the paper and then sways a little, for ever (on its own
   `rotate`, so its turn in the layout above and the tap's drift below are left alone); the words
   arrive in reading order, the names grow into place. Plain CSS, from the first paint. */
.wcd { animation: wcIn 1.6s var(--ease-out) var(--d, .1s) backwards, wcSway var(--sw, 9s) ease-in-out calc(var(--d, .1s) + 1.6s) infinite alternate; }
@keyframes wcIn { from { opacity: 0; scale: .9; } }
@keyframes wcSpinIn { from { opacity: 0; rotate: -40deg; scale: .85; } }
@keyframes wcSway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
.wc-pic { animation: wcPic 1.8s var(--ease-out) .1s backwards; }
@keyframes wcPic { from { opacity: 0; scale: 1.05; } }
.wc-words > *, .wc-go { animation: unveil 1.1s var(--ease-out) backwards; }
.wc-words > :nth-child(2) { animation-delay: .15s; } .wc-words > :nth-child(3) { animation-delay: .3s; }
.wc-words > :nth-child(4) { animation-delay: .45s; } .wc-words > :nth-child(5) { animation-delay: .6s; }
.wc-words > :nth-child(6) { animation-delay: .75s; } .wc-words > :nth-child(n+7) { animation-delay: .9s; }
.wc-words > .wc-names { animation: wcGrow 1.5s var(--ease-out) .35s backwards; }
.wc-words > .wc-save { animation: wcGrow 1.4s var(--ease-out) .2s backwards; }
.wc-go { animation-delay: 1.15s; }
@keyframes wcGrow { from { opacity: 0; scale: .82; } }
.wc-open::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1px solid var(--ink); opacity: 0; animation: pulse 2.6s ease-out 2.6s infinite; pointer-events: none; }
.wc-open { position: relative; }

/* The tap: the paintings drift apart, the words lift away, the photograph fades; meanwhile the
   veil itself dissolves onto the page (invite.css). */
html.intro-open .intro-wc .wcd { translate: var(--ox, 0px) var(--oy, 0px); opacity: 0; transition: translate 1.1s var(--ease-draw), opacity .8s ease .1s; }
html.intro-open .wc-kornize .intro-wc .wcd-p1 { translate: -50% -50%; scale: 1.15; transition: scale 1.1s var(--ease-draw), opacity .8s ease .1s; }
html.intro-open .intro-wc .wc-words, html.intro-open .intro-wc .wc-go { opacity: 0; translate: 0 -10px; scale: 1.02; transition: opacity .5s var(--ease-draw), translate .5s var(--ease-draw), scale .5s var(--ease-draw); }
html.intro-open .intro-wc .wc-pic { opacity: 0; transition: opacity .7s ease .1s; }
html.intro-open .wc-open::before { animation: none; }

/* ---------- the page ---------- */
.wc .inv { overflow-x: hidden; overflow-x: clip; }
.wc .inv-lang a { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: var(--accent2); font-family: var(--display); font-weight: 600; }

/* The hero is the card again: its paintings stand around it (::after), and the photograph wears
   the design's own (::before, laid out against the photograph, which always opens the hero). */
.wc .inv:not(.layout-photo) .hero { --pw: min(300px, 74vw); --ph: calc(var(--pw) * 1.25); --pt: 52px; padding-top: var(--pt); isolation: isolate; }
.wc .inv:not(.layout-photo) .hero-photo { width: var(--pw); height: var(--ph); aspect-ratio: auto; border: 6px solid var(--surface); box-shadow: 0 0 0 1px var(--accent2), 0 26px 50px -30px rgba(40, 40, 40, .45); }
.wc .hero::after { content: ""; position: absolute; z-index: -1; inset: 0 -16px; pointer-events: none; background-repeat: no-repeat; }
.wc .inv:not(.layout-photo) .hero:has(> .hero-photo)::before { content: ""; position: absolute; z-index: 2; pointer-events: none; left: calc(50% - var(--pw) / 2 - var(--ex)); top: calc(var(--pt) - var(--ex)); width: calc(var(--pw) + var(--ex) * 2); height: calc(var(--ph) + var(--ex) * 2); background-repeat: no-repeat; }
html.intro-open .wc .hero::after, html.intro-done .wc .hero::after, html.intro-open .wc .hero::before, html.intro-done .wc .hero::before { animation: wcIn 1.8s var(--ease-out) .35s backwards; }

.wc .inv:not(.layout-photo) .hero .invite { color: var(--ink-muted); }
.wc .names { text-transform: uppercase; letter-spacing: .03em; font-weight: 500; overflow-wrap: break-word; }
.wc .names .amp { font-family: var(--flourish); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.05em; line-height: 1; color: var(--soft); margin-block: .02em -.04em; }
.wc .layout-editorial .names .amp { font-size: 1.1em; margin-inline: .12em; }
.wc .layout-photo .hero-cover-text .names .amp { color: rgba(255, 255, 255, .9); }
.wc .tagline { color: var(--ink-muted); }
.wc .ornament-line { width: 180px; height: 36px; background: var(--orn) center / auto 100% no-repeat; }
.wc .ornament-line::before, .wc .ornament-line::after { display: none; }
.wc .date-block .sep { width: 2px; background: var(--line); }
.wc .bigdate .my { border-left: 2px solid var(--line); }
/* the countdown's cells are cards laid over the hero's paintings */
.wc .countdown div { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.wc .countdown b { font-weight: 500; }

/* sections open with a small painting between two hairlines */
.wc .inv .sec { border-top: 0; margin-top: 0; }
.wc .inv .sec::before, .wc .inv.layout-minimal .sec + .sec::before { content: ""; display: block; width: 230px; height: 38px; margin: 0 auto 26px; background: var(--orn) center / auto 100% no-repeat, linear-gradient(var(--line), var(--line)) left center / 30% 1px no-repeat, linear-gradient(var(--line), var(--line)) right center / 30% 1px no-repeat; }
.wc .sec-title { font-family: var(--flourish); font-weight: 400; font-size: clamp(2.3rem, 9vw, 2.9rem); letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--ink); margin-bottom: 22px; padding-inline: .2em; }
.wc .text { font-size: clamp(1.25rem, 3vw, 1.45rem); }
.wc .family .val { font-size: 1.45rem; }
.wc .family .lbl, .wc .place .lbl, .wc .ev-date span, .wc .rsvp-box .deadline, .wc .personal, .wc .countdown div > span, .wc .date-block .month, .wc .date-block .weekday, .wc .weekday-line { letter-spacing: .2em; }

/* cards: a sheet of the same paper, lighter, with a painting at one corner */
.wc .place, .wc .event, .wc .rsvp-box, .wc .wish, .wc .map { background: color-mix(in srgb, var(--surface) 74%, transparent); border: 1px solid var(--accent2); box-shadow: 0 22px 44px -36px rgba(40, 40, 40, .4); }
.wc .place, .wc .rsvp-box { position: relative; isolation: isolate; }
.wc .place::after, .wc .rsvp-box::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: contain; }
.wc .place h3 { font-size: 1.6rem; }
.wc .rsvp-box h2, .wc .celebrate h2 { font-family: var(--flourish); font-weight: 400; font-size: clamp(2.3rem, 9vw, 2.8rem); line-height: 1.3; }
.wc .celebrate.is-no h2 { font-style: normal; }
.wc .btn { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; padding: 12px 22px; }
.wc .btn svg { width: 15px; height: 15px; }
.wc .in { background-color: color-mix(in srgb, var(--surface) 82%, transparent); }
.wc .f label, .wc details.more summary { font-family: var(--display); font-weight: 600; }
.wc .seg span { font-family: var(--display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .86rem; }
.wc .shot { border: 6px solid var(--surface); box-shadow: 0 18px 34px -24px rgba(40, 40, 40, .45); }
.wc .schedule .t { font-family: var(--display); }
.wc .wish p { font-size: 1.22rem; }
.wc .inv-footer { border-top: 0; }
.wc .inv-footer::before { content: ""; display: block; width: 230px; height: 30px; margin: 0 auto 22px; background: var(--orn) center / auto 100% no-repeat; opacity: .8; }
.wc .actbar a, .wc .music-btn { font-family: var(--display); }
.wc .actbar a { font-weight: 700; letter-spacing: .06em; }

/* --- Lule pjeshke on the page --- */
.wc-pjeshke { --orn: url('/static/themes/pjeshke/bloom.webp'); }
.wc-pjeshke .hero { --ex: 46px; }
.wc-pjeshke .hero::after { background-image: url('/static/themes/pjeshke/rose.svg'), url('/static/themes/pjeshke/rose-wash.webp'), url('/static/themes/pjeshke/tulips.svg'), url('/static/themes/pjeshke/tulips-wash.webp'); background-size: 74px auto, 74px auto, 54px auto, 54px auto; background-position: left 2px bottom 0, left 2px bottom 0, right 8px bottom 4px, right 8px bottom 4px; opacity: .9; }
.wc-pjeshke .inv:not(.layout-photo) .hero:has(> .countdown)::after { bottom: 146px; } /* the line flowers stand beside the date, clear of the countdown */
.wc-pjeshke .hero:not(:has(> .hero-photo))::after, .wc-pjeshke .layout-minimal .hero::after { background-image: url('/static/themes/pjeshke/branch.svg'), url('/static/themes/pjeshke/branch-wash.webp'), url('/static/themes/pjeshke/leaves.svg'), url('/static/themes/pjeshke/leaves-wash.webp'), url('/static/themes/pjeshke/rose.svg'), url('/static/themes/pjeshke/rose-wash.webp'), url('/static/themes/pjeshke/tulips.svg'), url('/static/themes/pjeshke/tulips-wash.webp'); background-size: 132px auto, 132px auto, 96px auto, 96px auto, 74px auto, 74px auto, 54px auto, 54px auto; background-position: left -18px top 10px, left -18px top 10px, right -22px top 60px, right -22px top 60px, left 2px bottom 0, left 2px bottom 0, right 8px bottom 4px, right 8px bottom 4px; }
.wc-pjeshke .inv:not(.layout-photo) .hero:has(> .hero-photo)::before { background-image: url('/static/themes/pjeshke/white.svg'), url('/static/themes/pjeshke/bloom-b.webp'); background-size: 58% auto, 62px auto; background-position: left top, right 6px bottom 10px; }
.wc-pjeshke .inv:not(.layout-photo) .names { color: var(--ink); }
.wc-pjeshke .names .amp { font-size: 1.5em; margin-block: .04em -.1em; }
.wc-pjeshke .layout-editorial .names .amp { font-size: 1.15em; }
.wc-pjeshke .hero .invite { font-family: var(--display); font-weight: 600; font-size: 1.12rem; letter-spacing: .02em; text-transform: none; }
.wc-pjeshke .date-block .month, .wc-pjeshke .date-block .year { font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.wc-pjeshke .date-block .day { font-weight: 400; font-size: 3.6rem; }
.wc-pjeshke .place, .wc-pjeshke .event, .wc-pjeshke .rsvp-box, .wc-pjeshke .wish, .wc-pjeshke .map { border-radius: 22px; }
.wc-pjeshke .place::after { right: -6px; top: -14px; width: 46px; height: 50px; background-image: url('/static/themes/pjeshke/bloom.webp'); }
.wc-pjeshke .place + .place::after { right: auto; left: -6px; background-image: url('/static/themes/pjeshke/bloom-b.webp'); }
.wc-pjeshke .rsvp-box::after { right: -12px; bottom: -40px; width: 50px; height: 86px; background-image: url('/static/themes/pjeshke/tulips.svg'), url('/static/themes/pjeshke/tulips-wash.webp'); background-position: right bottom; }
.wc-pjeshke .shot { border-radius: 18px; }
.wc-pjeshke .layout-photo .hero::before { content: ""; position: absolute; z-index: 2; left: -40px; top: -6px; width: min(260px, 62vw); aspect-ratio: 607 / 496; background: url('/static/themes/pjeshke/white.svg') left top / contain no-repeat; pointer-events: none; }

/* --- Eukalipt on the page --- */
.wc-eukalipt { --orn: url('/static/themes/eukalipt/sprig-a.webp'); }
.wc-eukalipt .hero { --ex: 54px; }
.wc-eukalipt .hero::after { background-image: url('/static/themes/eukalipt/corner-tl.webp'), url('/static/themes/eukalipt/corner-br.webp'); background-size: min(230px, 58vw) auto, min(210px, 54vw) auto; background-position: left top, right bottom; }
.wc-eukalipt .inv:not(.layout-photo) .hero:has(> .hero-photo)::before { background-image: url('/static/themes/eukalipt/leaves-c.webp'), url('/static/themes/eukalipt/bloom-b.webp'), url('/static/themes/eukalipt/leaves-a.webp'); background-size: 104px auto, 58px auto, 96px auto; background-position: right top 6px, right 26px top 0, left bottom; }
.wc-eukalipt .inv:not(.layout-photo) .hero-photo { border-radius: 999px 999px 8px 8px; }
.wc-eukalipt .hero .invite { font-family: var(--display); font-weight: 500; font-size: .92rem; letter-spacing: .16em; }
.wc-eukalipt .names .amp { font-size: 1.3em; }
.wc-eukalipt .layout-editorial .names .amp { font-size: 1.1em; }
.wc-eukalipt .date-block { font-family: var(--display); }
.wc-eukalipt .date-block .month, .wc-eukalipt .date-block .year, .wc-eukalipt .date-block .day { font-family: var(--display); font-weight: 500; font-size: 1.7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.wc-eukalipt .date-block .sep { height: 40px; }
.wc-eukalipt .date-block .day { order: 1; } .wc-eukalipt .date-block .sep:nth-child(2) { order: 2; } .wc-eukalipt .date-block .month { order: 3; }
.wc-eukalipt .date-block .sep:nth-child(4) { order: 4; } .wc-eukalipt .date-block .year { order: 5; } .wc-eukalipt .date-block .weekday { order: 6; }
.wc-eukalipt .sec-title { font-size: clamp(2.9rem, 11.5vw, 3.5rem); line-height: 1.2; }
.wc-eukalipt .rsvp-box h2, .wc-eukalipt .celebrate h2 { font-size: clamp(2.8rem, 11vw, 3.3rem); line-height: 1.2; }
/* Inspiration has a single, very fine weight: a hairline of its own ink keeps it legible as a heading */
.wc-eukalipt .sec-title, .wc-eukalipt .rsvp-box h2, .wc-eukalipt .celebrate h2, .wc-eukalipt .names .amp { -webkit-text-stroke: .018em currentColor; }
.wc-eukalipt .place, .wc-eukalipt .event, .wc-eukalipt .rsvp-box, .wc-eukalipt .wish, .wc-eukalipt .map { border-radius: 6px; }
.wc-eukalipt .place::after { right: -10px; bottom: -12px; width: 64px; height: 64px; background-image: url('/static/themes/eukalipt/leaves-b.webp'); }
.wc-eukalipt .place + .place::after { right: auto; left: -10px; transform: scaleX(-1); }
.wc-eukalipt .rsvp-box::after { inset: -1px; background-image: url('/static/themes/eukalipt/corner-tl.webp'), url('/static/themes/eukalipt/corner-br.webp'); background-size: min(128px, 33vw) auto, min(120px, 31vw) auto; background-position: left top, right bottom; }
.wc-eukalipt .rsvp-box { padding-top: clamp(56px, 14vw, 72px); }
.wc-eukalipt .shot { border-radius: 4px; }
.wc-eukalipt .layout-photo .hero::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: min(300px, 74vw); aspect-ratio: 760 / 460; background: url('/static/themes/eukalipt/corner-tl.webp') left top / contain no-repeat; pointer-events: none; }

/* --- Kornizë ari on the page --- */
.wc-kornize { --orn: url('/static/themes/kornize/divider.svg'); }
.wc-kornize .inv:not(.layout-photo) .hero { --pw: min(250px, 62vw); --ph: calc(var(--pw) * 1.195); --pt: 72px; }
/* the photograph is a hexagon in the gold frame, centred on it (see .wcd-p1 above for the 1.81) */
.wc-kornize .inv:not(.layout-photo) .hero-photo { border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); margin-bottom: 64px; }
.wc-kornize .inv:not(.layout-photo) .hero:has(> .hero-photo)::before { --ex: calc(var(--pw) * .405); background-image: url('/static/themes/kornize/frame.svg'); background-size: 100% auto; background-position: center; top: calc(var(--pt) + var(--ph) / 2 - var(--pw) * .905); height: calc(var(--pw) * 1.81); }
.wc-kornize .hero::after { background-image: url('/static/themes/kornize/corner-tl.svg'), url('/static/themes/kornize/corner-br.svg'), url('/static/themes/kornize/confetti-up.svg'); background-size: min(140px, 34vw) auto, min(140px, 34vw) auto, min(300px, 70vw) auto; background-position: left top, right bottom, right 10px bottom 40px; }
.wc-kornize .hero .invite { font-family: var(--display); font-size: .8rem; letter-spacing: .14em; }
.wc-kornize .names { font-weight: 400; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wc-kornize .inv:not(.layout-photo) .names:not(:has(.ln, .nm)), .wc-kornize .inv:not(.layout-photo) .names:has(.ln, .nm) .ln-i { background: var(--gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  .wc-kornize .inv:not(.layout-photo) .names .amp { -webkit-text-fill-color: var(--soft); }
}
.wc-kornize .names .amp { font-size: .9em; color: var(--soft); }
.wc-kornize .date-block .day { font-weight: 400; }
.wc-kornize .date-block .sep { width: 1px; }
.wc-kornize .sec-title { font-size: clamp(2rem, 8vw, 2.5rem); color: var(--accent); }
.wc-kornize .rsvp-box h2, .wc-kornize .celebrate h2 { font-size: clamp(2.1rem, 8vw, 2.5rem); color: var(--accent); }
.wc-kornize .btn { font-weight: 500; font-size: .72rem; letter-spacing: .18em; border-radius: 2px; }
.wc-kornize .seg span, .wc-kornize .in, .wc-kornize .check { border-radius: 2px; }
.wc-kornize .place, .wc-kornize .event, .wc-kornize .rsvp-box, .wc-kornize .wish, .wc-kornize .map { border-radius: 2px; outline: 1px solid color-mix(in srgb, var(--soft) 45%, transparent); outline-offset: -8px; }
.wc-kornize .place::after { inset: -1px; background-image: url('/static/themes/kornize/corner-tl.svg'), url('/static/themes/kornize/corner-br.svg'); background-size: 64px auto, 64px auto; background-position: left top, right bottom; }
.wc-kornize .rsvp-box::after { inset: -1px; background-image: url('/static/themes/kornize/corner-tl.svg'), url('/static/themes/kornize/corner-br.svg'); background-size: 96px auto, 96px auto; background-position: left top, right bottom; }
.wc-kornize .shot { border-radius: 0; outline: 1px solid color-mix(in srgb, var(--soft) 50%, transparent); outline-offset: -12px; }
.wc-kornize .schedule .t { font-style: italic; }
.wc-kornize .layout-photo .hero::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: min(78vh, 720px); pointer-events: none; background: url('/static/themes/kornize/corner-tl.svg') left 6px top 6px / min(130px, 32vw) auto no-repeat, url('/static/themes/kornize/corner-tr.svg') right 6px top 6px / min(130px, 32vw) auto no-repeat; }