/* Themed paper, finishes, edges, botanicals and the five card layouts */

.paper {
  background-color: var(--paper);
  background-image: var(--tex);
  background-size: var(--tex-size);
  background-blend-mode: multiply;
  color: var(--main);
}
.pal-dark.paper { background-blend-mode: soft-light; }

/* ---------- the card ---------- */
.ew-card {
  --card-w: min(92vw, calc(86dvh * 5 / 7), 600px);
  position: relative;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  container-type: inline-size;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 28px 50px -30px rgba(40, 30, 20, .45), 0 10px 22px -16px rgba(40, 30, 20, .3);
  font-family: var(--font-serif);
  text-align: center;
}
.card-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 9cqw 10cqw;
  gap: 2.2cqw;
  z-index: 2;
}
.card-body > * { margin: 0; max-width: 100%; }

/* edges */
.paper-edge { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ew-card.edge-rounded { border-radius: 4cqw; }
.edge-border .paper-edge { inset: 3.2cqw; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.edge-double .paper-edge { inset: 3cqw; border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -1.6cqw; }
.ew-card.edge-gilded { box-shadow: inset 0 0 0 .9cqw transparent, 0 28px 50px -30px rgba(40, 30, 20, .45); }
.edge-gilded .paper-edge { border: .9cqw solid; border-image: linear-gradient(135deg, #8a6a2f, #f1dea4 30%, #b48a3c 55%, #f6e6b4 75%, #9a7735) 1; }
.ew-card.edge-deckle {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6'/%3E%3C/filter%3E%3Crect x='1' y='1' width='98' height='138' filter='url(%23r)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6'/%3E%3C/filter%3E%3Crect x='1' y='1' width='98' height='138' filter='url(%23r)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 22px rgba(40, 30, 20, .25));
  box-shadow: none;
}

/* finishes apply to the headline type */
.finish-foil .c-names, .finish-foil .c-heading, .finish-foil .c-bigdate, .finish-foil .amp,
.finish-rosegold .c-names, .finish-rosegold .c-heading, .finish-rosegold .c-bigdate,
.finish-silver .c-names, .finish-silver .c-heading, .finish-silver .c-bigdate {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: foil 6s ease-in-out infinite alternate;
}
.finish-foil :is(.c-names, .c-heading, .c-bigdate, .amp) { background-image: linear-gradient(100deg, #8a6a2f, #e8cf8a 25%, #b48a3c 45%, #f6e6b4 60%, #9a7735 80%, #d9bd7a); }
.finish-rosegold :is(.c-names, .c-heading, .c-bigdate) { background-image: linear-gradient(100deg, #9b5f55, #e9b7a6 25%, #b9786a 45%, #f4cfc2 60%, #a8675b 80%, #e3a99a); }
.finish-silver :is(.c-names, .c-heading, .c-bigdate) { background-image: linear-gradient(100deg, #6f7378, #e3e6ea 25%, #8e9399 45%, #f4f5f7 60%, #7c8086 80%, #cfd2d6); }
@keyframes foil { to { background-position: 100% 0; } }
.finish-letterpress .card-body { text-shadow: 0 1px 0 rgba(255, 255, 255, .65), 0 -.5px 0 rgba(0, 0, 0, .18); }
.finish-letterpress .card-body { color: color-mix(in srgb, var(--main) 88%, var(--paper)); }
.finish-emboss :is(.c-names, .c-heading, .c-bigdate) { color: var(--paper); text-shadow: -1px -1px 1px rgba(255, 255, 255, .9), 1px 1px 1.5px rgba(0, 0, 0, .3); }

/* ---------- botanicals ---------- */
.botanicals { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.bot { position: absolute; }
.bot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bot.tl { top: 0; left: 0; width: 44%; aspect-ratio: 1; }
.bot.tr { top: 0; right: 0; width: 44%; aspect-ratio: 1; transform: scaleX(-1); }
.bot.bl { bottom: 0; left: 0; width: 44%; aspect-ratio: 1; transform: scaleY(-1); }
.bot.br { bottom: 0; right: 0; width: 44%; aspect-ratio: 1; transform: rotate(180deg); }
.bot.top { top: -2%; left: 50%; width: 92%; aspect-ratio: 8 / 3; transform: translateX(-50%); }
.bot.bottom { bottom: -2%; left: 50%; width: 92%; aspect-ratio: 8 / 3; transform: translateX(-50%) scaleY(-1); }
.bot.side { top: 0; left: -2%; height: 92%; aspect-ratio: 32 / 62; }
.c-mono .botanicals { inset: -34%; z-index: -1; }
.bot.wreath { inset: 0; }
.arr-top ~ .card-body { padding-top: 26cqw; }
.arr-bottom ~ .card-body { padding-bottom: 24cqw; }
.arr-side ~ .card-body { padding-left: 30cqw; padding-right: 7cqw; }
.arr-side ~ .card-body .cal-block { width: 56cqw; }
.arr-frame ~ .card-body, .arr-corners ~ .card-body { padding: 15cqw 13cqw; }

/* ---------- type ---------- */
.c-names { font-family: var(--font-script); font-style: var(--script-style); font-weight: 400; font-size: 12cqw; line-height: 1.15; }
.c-names .amp { font-size: .75em; color: var(--accent); padding: 0 .08em; }
.c-heading { font-family: var(--font-script); font-style: var(--script-style); font-weight: 400; font-size: 15cqw; line-height: 1.05; }
.c-heading.small { font-size: 9cqw; }
.c-eyebrow { font-family: var(--font-sans); font-size: 2.3cqw; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); }
.c-intro { font-size: 3.4cqw; line-height: 1.45; font-style: italic; max-width: 70cqw; }
.c-intro.caps { font-style: normal; font-size: 2.4cqw; letter-spacing: .14em; text-transform: uppercase; }
.c-dateline { display: flex; align-items: center; gap: 3cqw; font-family: var(--font-sans); font-size: 2.6cqw; letter-spacing: .2em; text-transform: uppercase; margin-top: 1cqw !important; }
.c-dateline span { padding: 1.4cqw 2cqw; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .85; }
.c-dateline b { font-family: var(--font-serif); font-weight: 400; font-size: 5.4cqw; letter-spacing: .04em; text-transform: none; }
.c-time { font-size: 3cqw; font-style: italic; }
.c-venue { font-family: var(--font-sans); font-size: 2.6cqw; letter-spacing: .18em; text-transform: uppercase; line-height: 1.6; }
.c-venue span { letter-spacing: .08em; text-transform: none; font-size: .95em; opacity: .8; }
.c-foot { font-family: var(--font-sans); font-size: 2.3cqw; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.sc { font-family: "Cormorant SC", var(--font-serif) !important; letter-spacing: .02em !important; text-transform: none !important; font-size: 3.3cqw !important; }
.c-foot2.sc { font-size: 2.6cqw !important; margin-top: -1.2cqw !important; }
.c-mono { width: 40cqw; position: relative; }
.c-mono .monogram-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* trio (three photos with the date) */
.layout-trio .card-body { justify-content: flex-start; padding-top: 6cqw; gap: 1.8cqw; }
.layout-trio .c-heading { font-size: 16cqw; margin-bottom: 1cqw; }
.c-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; width: 82cqw; height: 48cqw; margin: 1cqw 0 3cqw !important; }
.c-trio figure { margin: 0; position: relative; overflow: hidden; }
.c-trio figure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .5)); }
.c-trio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter, grayscale(1) contrast(1.02)); }
.c-trio span { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 2; text-align: center; color: #fff; font-family: var(--font-serif); font-weight: 500; font-size: 13cqw; line-height: 1; font-variant-numeric: lining-nums; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .45), 0 6px 22px rgba(0, 0, 0, .4); }
.layout-trio .c-names { font-size: 10.5cqw; }

/* photo */
.c-arch { width: 46cqw; aspect-ratio: 3 / 4; border-radius: 50% 50% 0 0 / 34% 34% 0 0; overflow: hidden; margin: 0 0 1.5cqw !important; }
.c-arch img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter, grayscale(.2)); }
.layout-photo .card-body { gap: 1.8cqw; }
.layout-photo .c-names { font-size: 10cqw; }

/* calendar */
.c-month { font-family: var(--font-sans); font-size: 3cqw; letter-spacing: .4em; text-transform: uppercase; }
.cal-block { width: 64cqw; font-family: var(--font-sans); font-size: 2.6cqw; }
.cal-days, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-days { font-size: .8em; letter-spacing: .1em; opacity: .7; padding-bottom: 1.5cqw; border-bottom: 1px solid color-mix(in srgb, var(--main) 25%, transparent); margin-bottom: 1cqw; }
.cal-week span { position: relative; padding: 1.1cqw 0; }
.heart, .ring { position: absolute; left: 50%; top: 50%; width: 2.9em; height: 2.6em; transform: translate(-50%, -54%); overflow: visible; pointer-events: none; }
.heart path, .ring path { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.45, .05, .3, 1); }
.is-day.draw .heart path, .is-day.draw .ring path { stroke-dashoffset: 0; }
.c-date-small { font-family: var(--font-sans); font-size: 2.5cqw; letter-spacing: .18em; text-transform: uppercase; }
.layout-calendar .c-names { font-size: 10cqw; }

/* minimal */
.c-bigdate { font-family: var(--font-serif); font-weight: 300; font-size: 20cqw; line-height: 1; letter-spacing: -.01em; }
.c-bigdate i { font-style: normal; color: var(--accent); padding: 0 .04em; }
.c-names-caps { font-family: var(--font-sans); font-size: 3.6cqw; letter-spacing: .42em; text-transform: uppercase; }
.c-names-caps span { font-family: var(--font-script); font-style: var(--script-style); text-transform: none; letter-spacing: 0; font-size: 1.6em; color: var(--accent); padding: 0 .3em; }

/* the couple's own message */
.c-message { font-family: var(--font-serif); font-style: italic; font-size: 3.4cqw; line-height: 1.45; max-width: 80cqw; margin-inline: auto; opacity: .92; }