/*
  Free-form invitations: one stylesheet for the studio's canvas, its preview
  and the guest's page, so what the host places is what guests see.

  Everything is placed in design pixels of the device being shown (--W: 1200
  desktop, 768 tablet, 390 mobile) and scaled with the real width through
  container units: a section's box is a container, and an element's left,
  top, size and type size are its design pixels over the section's design
  width (--sw) times 100cqw. The numbers arrive as custom properties — from
  the invitation's own stylesheet on the page (per device, in media
  queries), from the studio's script on the canvas.

  Animations play on an element's inner layer (.cv-a), so they never fight
  its rotation; they start when its section is in view (.cv-on, added by
  canvas.js), or at once when there is no script. See
  docs/architecture/11-canvas.md.
*/

@property --cv-trk { syntax: "<length>"; inherits: true; initial-value: 0px; }

.cv-body { margin: 0; background: var(--pg-bg, #F6F1E9); color: var(--pg-c, #2A1E1A); font-family: var(--pg-ff, "Cormorant", Georgia, serif); -webkit-font-smoothing: antialiased; }
.cv-page { --W: 1200; position: relative; margin-inline: auto; inline-size: 100%; max-inline-size: 1680px; container-type: inline-size; background: var(--pg-bg, #F6F1E9); color: var(--pg-c, #2A1E1A); }
@media (max-width: 1024px) { .cv-page:not(.cv-ed) { --W: 768; } }
@media (max-width: 600px) { .cv-page:not(.cv-ed) { --W: 390; } }

/* ------------------------------------------------------------ sections */
.cv-sec { position: relative; overflow: clip; margin-block-end: calc(var(--gap, 0) / var(--W) * 100cqw); }
.cv-bg, .cv-bg::before, .cv-bg::after { position: absolute; inset: 0; }
.cv-bg { z-index: 0; background: var(--bgl, none), var(--bgc, transparent); background-blend-mode: multiply; }
.cv-bg::before { content: ""; background-image: var(--bgi, none); background-size: var(--bgis, cover); background-position: var(--bgip, center); background-repeat: var(--bgir, no-repeat); opacity: var(--bgio, 1); }
.cv-bg::after { content: ""; background-image: var(--bgt, none); background-size: var(--bgts, auto); mix-blend-mode: multiply; pointer-events: none; }
.cv-box { position: relative; z-index: 1; margin-inline: auto; inline-size: calc(var(--sw, 1200) / var(--W) * 100cqw); aspect-ratio: var(--sw, 1200) / var(--sh, 600); container-type: inline-size; }

/* ------------------------------------------------------------ elements */
.cv-el {
  position: absolute; box-sizing: border-box;
  left: calc(var(--x, 0) / var(--sw) * 100cqw); top: calc(var(--y, 0) / var(--sw) * 100cqw);
  inline-size: calc(var(--w, 100) / var(--sw) * 100cqw); block-size: calc(var(--h, 100) / var(--sw) * 100cqw);
  rotate: calc(var(--r, 0) * 1deg); opacity: calc(var(--o, 1) * var(--sf, 1));
  font-size: calc(var(--fs, 24) / var(--sw) * 100cqw);
}
.cv-el--text, .cv-el--guest { block-size: auto; }
.cv-a { inline-size: 100%; block-size: 100%; box-sizing: border-box; }
/* Smooth scrolling (Lenis), when assets/canvas.js turns it on. */
html.lenis, html.lenis body { block-size: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* Words, in the element's own type. */
.cv-t, .cv-btn, .cv-wid {
  font-family: var(--ff, var(--pg-ff)); font-weight: var(--fw, 400); font-style: var(--fi, normal);
  text-transform: var(--tt, none); letter-spacing: calc(var(--ls, 0) * 1em + var(--cv-trk)); line-height: var(--lh, 1.25);
  text-align: var(--al, center); color: var(--c, var(--pg-c)); text-decoration: var(--td, none); text-shadow: var(--tsh, none);
}
.cv-t { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.cv-t--hl span { background: var(--hl); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .15em; }

/* Pictures. */
.cv-img { display: block; inline-size: 100%; block-size: 100%; object-fit: var(--fit, cover); object-position: var(--fx, 50%) var(--fy, 50%);
  filter: var(--flt, none); transform: scale(var(--fsx, 1), var(--fsy, 1)); box-sizing: border-box;
  border: calc(var(--bw, 0) / var(--sw) * 100cqw) solid var(--bc, transparent); border-radius: calc(var(--rad, 0) / var(--sw) * 100cqw); box-shadow: var(--ish, none); }
.cv-mask--circle .cv-img { clip-path: circle(50% at 50% 50%); }
.cv-mask--oval .cv-img { clip-path: ellipse(50% 50% at 50% 50%); }
.cv-mask--arch .cv-img { border-radius: 999em 999em 0 0 / 60% 60% 0 0; }
.cv-mask--rounded .cv-img { border-radius: 12%; }
.cv-mask--diamond .cv-img { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cv-mask--heart .cv-img { -webkit-mask: url("canvas/heart.svg") center / 100% 100% no-repeat; mask: url("canvas/heart.svg") center / 100% 100% no-repeat; }

/* Shapes: boxes where a box will do, SVG where it will not. */
.cv-shape { inline-size: 100%; block-size: 100%; box-sizing: border-box; background: var(--fill, transparent);
  border: calc(var(--swd, 0) / var(--sw) * 100cqw) solid var(--stroke, transparent); border-radius: calc(var(--rad, 0) / var(--sw) * 100cqw); }
.cv-shape--ellipse, .cv-shape--ring { border-radius: 50%; }
.cv-shape--ring { background: transparent; }
.cv-shape--line, .cv-shape--dashed { background: transparent; border: 0; display: flex; align-items: center; }
.cv-shape--line::before, .cv-shape--dashed::before { content: ""; inline-size: 100%; border-top: max(1px, calc(var(--swd, 2) / var(--sw) * 100cqw)) solid var(--stroke, var(--fill, currentColor)); }
.cv-shape--dashed::before { border-top-style: dashed; }
.cv-shape--double { background: transparent; border: 0; outline: max(1px, calc(var(--swd, 2) / var(--sw) * 100cqw)) solid var(--stroke, currentColor); outline-offset: calc(-1 * max(1px, calc(var(--swd, 2) / var(--sw) * 100cqw))); box-shadow: inset 0 0 0 calc(var(--swd, 2) / var(--sw) * 100cqw * 3) var(--fill, transparent), inset 0 0 0 calc(var(--swd, 2) / var(--sw) * 100cqw * 4) var(--stroke, currentColor); }
.cv-svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.cv-svg path { fill: var(--fill, transparent); stroke: var(--stroke, transparent); stroke-width: calc(var(--swd, 0) / var(--sw) * 100cqw); vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* Ornaments from the library, in any colour; frames drawn round a box; wax seals. */
.cv-orn { inline-size: 100%; block-size: 100%; background: var(--c, currentColor);
  -webkit-mask: var(--orn) center / contain no-repeat; mask: var(--orn) center / contain no-repeat; }
.cv-frame { inline-size: 100%; block-size: 100%; box-sizing: border-box; border: calc(var(--frw, 24) / var(--sw) * 100cqw) solid transparent; border-image: var(--frimg) var(--frs, 30) round; }
.cv-seal { position: relative; display: grid; place-items: center; inline-size: 100%; block-size: 100%; background: var(--c, #7A1F2E);
  -webkit-mask: var(--wax) center / contain no-repeat; mask: var(--wax) center / contain no-repeat; container-type: inline-size; }
.cv-seal::before { content: ""; position: absolute; inset: 0; background: var(--wax) center / contain no-repeat; mix-blend-mode: hard-light; }
/* The seal's letters: centred in it, at the host's size, nudged as the host likes (for a script whose capitals sit high). */
.cv-seal span { position: relative; display: block; inline-size: 100%; text-align: center; white-space: nowrap; font-family: var(--ff, "Pinyon Script", cursive); font-size: calc(var(--ts, 28) * 1cqw); line-height: 1;
  translate: calc(var(--tx, 0) * 1cqw) calc(var(--ty, 0) * 1cqw); color: var(--tc, color-mix(in srgb, var(--c, #7A1F2E) 58%, #000)); text-shadow: 0 .02em 0 color-mix(in srgb, var(--c, #7A1F2E) 55%, #fff); }

/* Buttons. */
.cv-btn { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding: 0 .6em;
  background: var(--bf, transparent); border: calc(var(--bwd, 0) / var(--sw) * 100cqw) solid var(--bl, transparent);
  border-radius: calc(var(--br, 0) / var(--sw) * 100cqw); text-decoration: none; cursor: pointer; transition: filter .2s, transform .2s; }
a.cv-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
a.cv-btn:focus-visible { outline: 2px solid var(--c, currentColor); outline-offset: 3px; }

/* Widgets: the guest's name, the days left, the month, the reply form. Sized in ems of the element's type size. */
.cv-wid { inline-size: 100%; block-size: 100%; box-sizing: border-box; }
.cv-count { display: flex; justify-content: center; align-items: flex-start; gap: .7em; }
.cv-count__u { display: grid; justify-items: center; min-inline-size: 2.2em; }
.cv-count__n { font-size: 2.1em; line-height: 1; color: var(--ac, inherit); font-variant-numeric: tabular-nums; }
.cv-count__l { font-size: .55em; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-block-start: .5em; }
.cv-cal { inline-size: 100%; border-collapse: collapse; table-layout: fixed; }
.cv-cal caption { font-size: 1.3em; margin-block-end: .5em; color: var(--ac, inherit); }
.cv-cal th { font-size: .62em; letter-spacing: .14em; font-weight: 500; opacity: .75; padding-block: .4em; }
.cv-cal td { text-align: center; padding-block: .32em; font-variant-numeric: tabular-nums; }
.cv-cal td.is-day { position: relative; color: var(--bf, #fff); }
.cv-cal td.is-day::before { content: ""; position: absolute; inset: 50% auto auto 50%; inline-size: 1.9em; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--ac, currentColor); z-index: -1; }
.cv-cal tbody { position: relative; z-index: 0; }
.cv-cal-add { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cv-rsvp { text-align: start; }
.cv-rsvp form { display: grid; gap: .8em; }
.cv-rsvp label, .cv-rsvp legend { display: block; font-size: .8em; margin-block-end: .3em; }
.cv-rsvp fieldset { border: 0; margin: 0; padding: 0; }
.cv-rsvp .cv-choice { display: inline-flex; align-items: center; gap: .4em; margin-inline-end: 1.2em; font-size: .9em; }
.cv-rsvp input[type="text"], .cv-rsvp input[type="number"], .cv-rsvp textarea { box-sizing: border-box; inline-size: 100%; font: inherit; font-size: .9em; padding: .5em .7em; color: inherit;
  background: var(--bf, rgba(255, 255, 255, .7)); border: 1px solid var(--bl, rgba(0, 0, 0, .2)); border-radius: .3em; }
.cv-rsvp input[type="radio"] { accent-color: var(--ac, currentColor); inline-size: 1em; block-size: 1em; }
.cv-rsvp button, .cv-rsvp .cv-rsvp__send { font: inherit; font-size: .9em; padding: .7em 1.4em; border: 0; border-radius: .3em; background: var(--ac, #5E1B26); color: var(--bf, #fff); cursor: pointer; justify-self: center; }
.cv-rsvp .cv-note { font-size: .72em; opacity: .75; margin: 0; }
.cv-rsvp p { margin: 0; }

/* After a reply: a card in the invitation's own colours and type. */
.cv-thanks { min-block-size: 100vh; display: grid; place-items: center; padding: 1.5rem; box-sizing: border-box; }
.cv-thanks .card-invite { max-inline-size: 34rem; padding: 3rem 2rem; text-align: center; background: color-mix(in srgb, var(--pg-bg) 70%, #fff); box-shadow: 0 20px 50px rgba(0, 0, 0, .1); }
.cv-thanks h1 { font-weight: 400; font-size: clamp(2rem, 7vw, 3rem); margin: 0 0 1rem; }
.cv-thanks .message { font-size: 1.25rem; }
.cv-thanks .muted, .cv-thanks .made-with { font-family: "Jost", system-ui, sans-serif; font-size: .9rem; opacity: .75; }
.cv-thanks a { color: inherit; }

/* A message after a reply. */
.cv-flash { position: fixed; z-index: 90; inset: 1rem 1rem auto; margin: 0 auto; max-inline-size: 30rem; padding: .9rem 1.2rem; border-radius: 8px; background: #FFFCF6; color: #221B19;
  font: 400 1rem/1.4 "Jost", system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: cv-flash 6s ease forwards; }
.cv-flash--error { background: #F3E4E3; }
@keyframes cv-flash { 0% { opacity: 0; translate: 0 -1rem; } 6%, 85% { opacity: 1; translate: 0; } 100% { opacity: 0; visibility: hidden; } }
/* A host-only strip on the preview opened in its own tab; never on a guest's page. */
.preview-bar { position: sticky; inset-block-start: 0; z-index: 85; padding: .6rem 1rem; text-align: center; background: #221B19; color: #F7F2E9; font: 400 .85rem/1.4 "Jost", system-ui, sans-serif; }
.preview-bar a { color: #D4B47A; margin-inline-start: .5rem; }
.cv-made { padding: 1.5rem 1rem 2rem; text-align: center; font: 400 .8rem/1 "Jost", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

/* ------------------------------------------------------------ the opening
   A full-screen frame shown first. Its picture is drawn on panes, so the
   way it gives way can split it (curtain, doors, split) or fold it
   (envelope); the elements on it fade first. canvas.js starts it on a tap
   or after a while; without the script it fades by itself. */
.cv-op { position: fixed; inset: 0; z-index: 80; overflow: hidden; perspective: 1600px; --spd: 1; --odl: 0s; }
.cv-op__pane { position: absolute; inset: 0; }
.cv-op__pane > .cv-bg { position: absolute; inset: 0; }
.cv-op__stage { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; z-index: 2; }
.cv-op .cv-box { inline-size: min(86cqw, calc(86cqh * var(--sw) / var(--sh))); }
/* The design is the card inside: ivory, lying on the background (what shows without 3D; opening3d.js draws it onto its card). */
.cv-op .cv-box { background: #FBF8F2; box-shadow: 0 1.2cqw 3cqw rgba(40, 25, 15, .22), 0 .2cqw .5cqw rgba(40, 25, 15, .16); }
/* opening3d.js reads the card as laid out, still. */
.cv-op--measure .cv-a, .cv-op--measure .cv-tw-ch, .cv-op--measure .cv-sp-c { animation: none !important; opacity: 1 !important; transform: none !important; }
.cv-op--measure .cv-el { rotate: none !important; transform: none !important; }
.cv-op [data-act="open"], .cv-op--tapany { cursor: pointer; }
.cv-opener { transition: filter .2s, scale .2s; }
.cv-opener:hover { filter: brightness(1.06); scale: 1.03; }
.cv-opener:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.cv-op--curtain .cv-op__pane--1, .cv-op--doors .cv-op__pane--1 { clip-path: inset(0 50% 0 0); }
.cv-op--curtain .cv-op__pane--2, .cv-op--doors .cv-op__pane--2 { clip-path: inset(0 0 0 50%); }
.cv-op--split .cv-op__pane--1 { clip-path: inset(0 0 50% 0); }
.cv-op--split .cv-op__pane--2 { clip-path: inset(50% 0 0 0); }
.cv-op--envelope .cv-op__pane--1 { clip-path: polygon(0 0, 100% 0, 50% 54%); z-index: 4; filter: brightness(1.03); }
.cv-op--envelope .cv-op__pane--2 { clip-path: polygon(0 100%, 100% 100%, 50% 47%); z-index: 3; }
.cv-op--envelope .cv-op__pane--3 { clip-path: polygon(0 0, 0 100%, 53% 50%); z-index: 2; filter: brightness(.97); }
.cv-op--envelope .cv-op__pane--4 { clip-path: polygon(100% 0, 100% 100%, 47% 50%); z-index: 2; filter: brightness(.97); }
.cv-op--envelope .cv-op__pane { filter: drop-shadow(0 2px 3px rgba(40, 25, 15, .16)); }
.cv-op--envelope .cv-op__stage { z-index: 6; }

html.cv-lock, html.cv-lock body { overflow: hidden; }
.cv-op.is-open { display: none; }
.cv-op.is-opening { pointer-events: none; }
/* The words and pictures on it go first; then it gives way. */
.cv-op.is-opening .cv-op__stage { animation: cv-op-fade calc(.45s * var(--spd)) ease var(--odl) forwards; }
:is(.cv-op--box, .cv-op--vellum, .cv-op--flip).is-opening { animation: cv-op-fade calc(.9s * var(--spd)) ease var(--odl) forwards; }
.cv-op--curtain.is-opening .cv-op__pane--1 { animation: cv-op-left calc(1.2s * var(--spd)) cubic-bezier(.6, 0, .2, 1) calc(var(--odl) + .35s * var(--spd)) forwards; }
.cv-op--curtain.is-opening .cv-op__pane--2 { animation: cv-op-right calc(1.2s * var(--spd)) cubic-bezier(.6, 0, .2, 1) calc(var(--odl) + .35s * var(--spd)) forwards; }
.cv-op--doors.is-opening .cv-op__pane--1 { transform-origin: left center; animation: cv-op-door-l calc(1.3s * var(--spd)) cubic-bezier(.5, 0, .2, 1) calc(var(--odl) + .35s * var(--spd)) forwards; }
.cv-op--doors.is-opening .cv-op__pane--2 { transform-origin: right center; animation: cv-op-door-r calc(1.3s * var(--spd)) cubic-bezier(.5, 0, .2, 1) calc(var(--odl) + .35s * var(--spd)) forwards; }
.cv-op--split.is-opening .cv-op__pane--1 { animation: cv-op-up calc(1s * var(--spd)) cubic-bezier(.7, 0, .2, 1) calc(var(--odl) + .35s * var(--spd)) forwards; }
.cv-op--split.is-opening .cv-op__pane--2 { animation: cv-op-down calc(1s * var(--spd)) cubic-bezier(.7, 0, .2, 1) calc(var(--odl) + .35s * var(--spd)) forwards; }
.cv-op--envelope.is-opening .cv-op__pane--1 { transform-origin: top; animation: cv-op-flap-t calc(.9s * var(--spd)) cubic-bezier(.4, 0, .2, 1) calc(var(--odl) + .4s * var(--spd)) forwards; }
.cv-op--envelope.is-opening .cv-op__pane--2 { transform-origin: bottom; animation: cv-op-flap-b calc(.9s * var(--spd)) cubic-bezier(.4, 0, .2, 1) calc(var(--odl) + .65s * var(--spd)) forwards; }
.cv-op--envelope.is-opening .cv-op__pane--3 { transform-origin: left; animation: cv-op-flap-l calc(.9s * var(--spd)) cubic-bezier(.4, 0, .2, 1) calc(var(--odl) + .95s * var(--spd)) forwards; }
.cv-op--envelope.is-opening .cv-op__pane--4 { transform-origin: right; animation: cv-op-flap-r calc(.9s * var(--spd)) cubic-bezier(.4, 0, .2, 1) calc(var(--odl) + .95s * var(--spd)) forwards; }
html:not(.cv-js) .cv-op { animation: cv-op-fade .8s ease 4s forwards; }
/* Openings drawn in 3D (opening3d.js): the background stays whole and the paper is drawn over it, while it loads too; .is-flat gives it back to the flat version. */
html.cv-js .cv-op--3dable:not(.is-flat) .cv-op__pane--1 { clip-path: none; filter: none; }
html.cv-js .cv-op--3dable:not(.is-flat) :is(.cv-op__pane--2, .cv-op__pane--3, .cv-op__pane--4) { display: none; }
html.cv-js .cv-op--3dable:not(.is-flat) .cv-op__stage { visibility: hidden; }
.cv-op--3d.is-opening .cv-op__pane { animation: none; }
.cv-op--3d.is-opening { animation: cv-op-fade .55s ease calc(var(--odl) + (var(--o3d, 3.6s) - .55s) * var(--spd) + var(--ohold, 0s)) forwards; pointer-events: auto; }
/* A tap while the card is up moves on to the invitation. */
.cv-op--3d.is-opening.is-skip { animation: cv-op-fade .4s ease forwards; }
/* Scratch to open: gold foil over the card, rubbed away by the guest (canvas.js); then a tap goes on to the invitation. */
.cv-op--scratch .cv-box { overflow: hidden; }
.cv-scratch { position: absolute; inset: 0; z-index: 9; display: block; inline-size: 100%; block-size: 100%; touch-action: none; cursor: crosshair; transition: opacity .8s ease; }
.cv-scratch.is-gone { opacity: 0; pointer-events: none; }
.cv-cover { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.cv-cover__l, .cv-cover__r { position: absolute; inset-block: 0; inline-size: 50.4%; background-color: var(--cov, #6E1423); background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .18)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(255, 225, 225, .13) 7%, rgba(0, 0, 0, .05) 12%, rgba(0, 0, 0, .22) 16.6%); transition: transform 1.3s cubic-bezier(.55, 0, .85, .35); will-change: transform; }
.cv-cover__l { inset-inline-start: 0; transform-origin: 0 0; box-shadow: inset -6px 0 10px -6px rgba(0, 0, 0, .45); }
.cv-cover__r { inset-inline-end: 0; transform-origin: 100% 0; box-shadow: inset 6px 0 10px -6px rgba(0, 0, 0, .45); }
.cv-cover__mark { position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 400 clamp(18px, 7cqi, 44px)/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .06em; color: #F3E2AE; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: opacity .5s ease; }
.cv-cover.is-fallen .cv-cover__l { transform: translateY(112%) rotate(-9deg); }
.cv-cover.is-fallen .cv-cover__r { transform: translateY(118%) rotate(8deg); transition-delay: .08s; }
.cv-cover.is-fallen .cv-cover__mark { opacity: 0; }
.cv-op--scratch.is-opening { animation: cv-op-fade calc(.6s * var(--spd)) ease forwards; }
.cv-op3d { position: absolute; inset: 0; z-index: 5; display: block; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; outline: none; touch-action: manipulation; }
/* A room's light over the host's background: a soft pool from the upper left, falling off to the edges. */
.cv-op3d__light { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 90% at 34% 30%, rgba(255, 247, 232, .34), rgba(255, 247, 232, 0) 58%), radial-gradient(140% 110% at 50% 46%, rgba(0, 0, 0, 0) 52%, rgba(28, 16, 6, .30) 100%); }
.cv-op3d__light::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 40% at 50% 58%, rgba(28, 16, 6, .07), rgba(28, 16, 6, 0) 70%); }
.cv-op3d__hint { position: absolute; inset-inline: 0; inset-block-end: max(9%, 36px); z-index: 6; margin: 0; text-align: center; pointer-events: none;
  font: 500 12px/1.4 "Jost", system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: rgba(52, 38, 26, .62); transition: opacity .4s ease; animation: cv-op3d-hint 2.6s ease-in-out 1.2s infinite both; }
.cv-op3d__hint--light { color: rgba(255, 249, 238, .74); }
.cv-op.is-opening .cv-op3d__hint { opacity: 0; animation: none; }
.cv-op--3dable.is-flat :is(.cv-op3d, .cv-op3d__hint, .cv-op3d__light) { display: none; }
@keyframes cv-op3d-hint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes cv-op-fade { to { opacity: 0; visibility: hidden; } }
@keyframes cv-op-up { to { transform: translateY(-101%); } }
@keyframes cv-op-down { to { transform: translateY(101%); } }
@keyframes cv-op-left { to { transform: translateX(-101%); } }
@keyframes cv-op-right { to { transform: translateX(101%); } }
@keyframes cv-op-door-l { to { transform: rotateY(-100deg); opacity: 0; } }
@keyframes cv-op-door-r { to { transform: rotateY(100deg); opacity: 0; } }
@keyframes cv-op-flap-t { to { transform: rotateX(-110deg); opacity: 0; } }
@keyframes cv-op-flap-b { to { transform: rotateX(110deg); opacity: 0; } }
@keyframes cv-op-flap-l { to { transform: rotateY(110deg); opacity: 0; } }
@keyframes cv-op-flap-r { to { transform: rotateY(-110deg); opacity: 0; } }

/* What plays over the page as the opening gives way (canvas.js adds .is-on as it opens). */
.cv-fx { position: fixed; inset: 0; z-index: 81; overflow: hidden; pointer-events: none; visibility: hidden; --fxc: #FFFFFF; --spd: 1; --odl: 0s; }
.cv-fx.is-on { visibility: visible; }
.cv-fx i { position: absolute; inset: 0; opacity: 0; }
.cv-fx--light i:nth-child(1) { background: radial-gradient(circle at 50% 50%, var(--fxc) 0, color-mix(in srgb, var(--fxc) 75%, transparent) 22%, transparent 62%); }
.cv-fx--light i:nth-child(2) { background: var(--fxc); }
.cv-fx--light.is-on i:nth-child(1) { animation: cv-fx-burst calc(1.6s * var(--spd)) cubic-bezier(.2, .7, .3, 1) var(--odl) forwards; }
.cv-fx--light.is-on i:nth-child(2) { animation: cv-fx-flash calc(1.4s * var(--spd)) ease-out calc(var(--odl) + .15s * var(--spd)) forwards; }
.cv-fx--glow i:nth-child(1) { background: radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--fxc) 90%, transparent) 0, color-mix(in srgb, var(--fxc) 40%, transparent) 45%, transparent 75%); }
.cv-fx--glow.is-on i:nth-child(1) { animation: cv-fx-glow calc(2.2s * var(--spd)) ease-in-out var(--odl) forwards; }
.cv-fx--sparkles i { filter: drop-shadow(0 0 4px var(--fxc)) drop-shadow(0 0 10px var(--fxc)); }
.cv-fx--sparkles i:nth-child(1) { background: radial-gradient(circle at 12% 22%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 34% 64%, var(--fxc) 0 3px, transparent 4px), radial-gradient(circle at 58% 18%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 82% 46%, var(--fxc) 0 3px, transparent 4px), radial-gradient(circle at 70% 82%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 22% 86%, var(--fxc) 0 2px, transparent 3px); }
.cv-fx--sparkles i:nth-child(2) { background: radial-gradient(circle at 46% 40%, var(--fxc) 0 3px, transparent 4px), radial-gradient(circle at 8% 52%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 90% 14%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 64% 58%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 40% 90%, var(--fxc) 0 3px, transparent 4px), radial-gradient(circle at 94% 76%, var(--fxc) 0 2px, transparent 3px); }
.cv-fx--sparkles i:nth-child(3) { background: radial-gradient(circle at 26% 40%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 52% 76%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 76% 28%, var(--fxc) 0 3px, transparent 4px), radial-gradient(circle at 16% 8%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 86% 92%, var(--fxc) 0 2px, transparent 3px), radial-gradient(circle at 60% 4%, var(--fxc) 0 2px, transparent 3px); }
.cv-fx--sparkles.is-on i { animation: cv-fx-twinkle calc(2.6s * var(--spd)) ease-in-out var(--odl) forwards; }
.cv-fx--sparkles.is-on i:nth-child(2) { animation-delay: calc(var(--odl) + .25s * var(--spd)); }
.cv-fx--sparkles.is-on i:nth-child(3) { animation-delay: calc(var(--odl) + .5s * var(--spd)); }
.cv-fx--shimmer i:nth-child(1) { background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--fxc) 25%, transparent) 42%, color-mix(in srgb, var(--fxc) 92%, transparent) 50%, color-mix(in srgb, var(--fxc) 25%, transparent) 58%, transparent 70%) 130% 0 / 260% 100% no-repeat; }
.cv-fx--shimmer.is-on i:nth-child(1) { animation: cv-fx-sweep calc(1.6s * var(--spd)) cubic-bezier(.45, 0, .2, 1) var(--odl) forwards; }
.cv-fx--petals i, .cv-fx--confetti i { inset: -20% 0 auto; block-size: 120%; }
.cv-fx--petals i:nth-child(1) { background: radial-gradient(ellipse 7px 11px at 8% 10%, var(--fxc) 55%, transparent 70%), radial-gradient(ellipse 9px 6px at 28% 30%, var(--fxc) 55%, transparent 70%), radial-gradient(ellipse 6px 10px at 52% 6%, var(--fxc) 55%, transparent 70%), radial-gradient(ellipse 10px 7px at 74% 24%, var(--fxc) 55%, transparent 70%), radial-gradient(ellipse 7px 10px at 92% 12%, var(--fxc) 55%, transparent 70%); }
.cv-fx--petals i:nth-child(2) { background: radial-gradient(ellipse 8px 12px at 18% 2%, color-mix(in srgb, var(--fxc) 80%, #fff) 55%, transparent 70%), radial-gradient(ellipse 10px 6px at 40% 18%, color-mix(in srgb, var(--fxc) 80%, #fff) 55%, transparent 70%), radial-gradient(ellipse 6px 9px at 64% 14%, color-mix(in srgb, var(--fxc) 80%, #fff) 55%, transparent 70%), radial-gradient(ellipse 9px 7px at 84% 4%, color-mix(in srgb, var(--fxc) 80%, #fff) 55%, transparent 70%); }
.cv-fx--petals i:nth-child(3) { background: radial-gradient(ellipse 6px 9px at 4% 26%, color-mix(in srgb, var(--fxc) 85%, #000) 55%, transparent 70%), radial-gradient(ellipse 8px 11px at 34% 8%, color-mix(in srgb, var(--fxc) 85%, #000) 55%, transparent 70%), radial-gradient(ellipse 7px 9px at 58% 28%, color-mix(in srgb, var(--fxc) 85%, #000) 55%, transparent 70%), radial-gradient(ellipse 9px 6px at 96% 30%, color-mix(in srgb, var(--fxc) 85%, #000) 55%, transparent 70%); }
.cv-fx--petals.is-on i { animation: cv-fx-fall calc(4s * var(--spd)) cubic-bezier(.3, .1, .6, 1) var(--odl) forwards; }
.cv-fx--petals.is-on i:nth-child(2) { animation-duration: calc(3.4s * var(--spd)); animation-delay: calc(var(--odl) + .3s * var(--spd)); }
.cv-fx--petals.is-on i:nth-child(3) { animation-duration: calc(3.8s * var(--spd)); animation-delay: calc(var(--odl) + .15s * var(--spd)); }
.cv-fx--confetti i:nth-child(1) { background: radial-gradient(ellipse 3px 6px at 6% 8%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 5px 3px at 18% 22%, #fff 70%, transparent 80%), radial-gradient(ellipse 3px 6px at 32% 4%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 5px 3px at 46% 18%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 3px 6px at 60% 10%, #fff 70%, transparent 80%), radial-gradient(ellipse 5px 3px at 74% 26%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 3px 6px at 88% 6%, var(--fxc) 70%, transparent 80%); }
.cv-fx--confetti i:nth-child(2) { background: radial-gradient(ellipse 5px 3px at 12% 16%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 3px 6px at 26% 2%, color-mix(in srgb, var(--fxc) 70%, #fff) 70%, transparent 80%), radial-gradient(ellipse 5px 3px at 40% 28%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 3px 6px at 54% 14%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 5px 3px at 68% 4%, #fff 70%, transparent 80%), radial-gradient(ellipse 3px 6px at 82% 20%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 5px 3px at 96% 12%, var(--fxc) 70%, transparent 80%); }
.cv-fx--confetti i:nth-child(3) { background: radial-gradient(ellipse 3px 5px at 3% 24%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 4px 3px at 22% 10%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 3px 5px at 50% 30%, #fff 70%, transparent 80%), radial-gradient(ellipse 4px 3px at 78% 8%, var(--fxc) 70%, transparent 80%), radial-gradient(ellipse 3px 5px at 92% 28%, var(--fxc) 70%, transparent 80%); }
.cv-fx--confetti.is-on i { animation: cv-fx-fall calc(3.6s * var(--spd)) cubic-bezier(.25, .1, .5, 1) var(--odl) forwards; }
.cv-fx--confetti.is-on i:nth-child(2) { animation-duration: calc(3s * var(--spd)); animation-delay: calc(var(--odl) + .2s * var(--spd)); }
.cv-fx--confetti.is-on i:nth-child(3) { animation-duration: calc(3.3s * var(--spd)); animation-delay: calc(var(--odl) + .1s * var(--spd)); }
.cv-fx--hearts i { inset: auto 0 -30% 0; block-size: 130%; background: var(--fxc); }
.cv-fx--hearts i:nth-child(1) { -webkit-mask: url("canvas/heart.svg") 8% 96% / 26px 24px no-repeat, url("canvas/heart.svg") 30% 88% / 18px 17px no-repeat, url("canvas/heart.svg") 52% 98% / 30px 28px no-repeat, url("canvas/heart.svg") 76% 90% / 20px 19px no-repeat, url("canvas/heart.svg") 94% 97% / 24px 22px no-repeat; mask: url("canvas/heart.svg") 8% 96% / 26px 24px no-repeat, url("canvas/heart.svg") 30% 88% / 18px 17px no-repeat, url("canvas/heart.svg") 52% 98% / 30px 28px no-repeat, url("canvas/heart.svg") 76% 90% / 20px 19px no-repeat, url("canvas/heart.svg") 94% 97% / 24px 22px no-repeat; }
.cv-fx--hearts i:nth-child(2) { opacity: 0; background: color-mix(in srgb, var(--fxc) 70%, #fff); -webkit-mask: url("canvas/heart.svg") 18% 99% / 16px 15px no-repeat, url("canvas/heart.svg") 42% 92% / 24px 22px no-repeat, url("canvas/heart.svg") 64% 99% / 16px 15px no-repeat, url("canvas/heart.svg") 86% 93% / 28px 26px no-repeat; mask: url("canvas/heart.svg") 18% 99% / 16px 15px no-repeat, url("canvas/heart.svg") 42% 92% / 24px 22px no-repeat, url("canvas/heart.svg") 64% 99% / 16px 15px no-repeat, url("canvas/heart.svg") 86% 93% / 28px 26px no-repeat; }
.cv-fx--hearts i:nth-child(3) { display: none; }
.cv-fx--hearts.is-on i { animation: cv-fx-rise calc(3.6s * var(--spd)) cubic-bezier(.3, .2, .5, 1) var(--odl) forwards; }
.cv-fx--hearts.is-on i:nth-child(2) { animation-delay: calc(var(--odl) + .35s * var(--spd)); }
@keyframes cv-fx-burst { 0% { opacity: 0; transform: scale(.25); } 25% { opacity: 1; } 55% { opacity: 1; transform: scale(1.7); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes cv-fx-flash { 0% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: .85; } 100% { opacity: 0; } }
@keyframes cv-fx-glow { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes cv-fx-twinkle { 0% { opacity: 0; transform: scale(.8); } 15%, 45%, 75% { opacity: 1; transform: scale(1); } 30%, 60% { opacity: .35; } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes cv-fx-sweep { 0% { opacity: 1; background-position: 130% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
@keyframes cv-fx-fall { 0% { opacity: 0; transform: translate(0, -10%) rotate(0); } 10% { opacity: 1; } 50% { transform: translate(2%, 40%) rotate(8deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-2%, 90%) rotate(-6deg); } }
@keyframes cv-fx-rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .95; } 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(-75%); } }

/* Typewriter: canvas.js sets each letter apart, and they arrive one by one. */
.is-tw > .cv-a { clip-path: none !important; }
.cv-tw-ch { opacity: 0; }
.cv-on .cv-tw-ch, html:not(.cv-js) .cv-tw-ch { animation: cv-tw-ch .01s linear calc(var(--tw0, 0s) + var(--i) * var(--tws, .05s)) forwards; }
@keyframes cv-tw-ch { to { opacity: 1; } }

/* Letters or lines that rise: canvas.js sets each letter (or each line) in
   a mask of its own, and they come up one after another. Without the script
   the words simply fade in. */
.cv-sp-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .16em; margin: 0 -.04em -.16em; }
.cv-sp-l { display: block; }
.cv-sp-w { display: inline-block; white-space: nowrap; }
.cv-sp-c { display: inline-block; transform: translateY(115%); }
.cv-on .cv-sp-c, html:not(.cv-js) .cv-sp-c { animation: cv-sp var(--spd, .9s) cubic-bezier(.22, 1, .36, 1) calc(var(--sp0, 0s) + var(--i) * var(--sps, .05s)) both; }
@keyframes cv-sp { from { transform: translateY(115%); } to { transform: none; } }
.is-sp-still .cv-sp-c { animation: none; transform: none; }
/* A photo that opens up as the guest scrolls past: the picture moves inside its frame. */
[data-sc^="unveil:"] > .cv-a { overflow: hidden; }

/* ------------------------------------------------------------ animations
   cv-{in|out|loop}-{name}[-{direction}]. Distances are in container units,
   so they scale with the invitation. */
@keyframes cv-in-fade { from { opacity: 0; } }
@keyframes cv-in-rise { from { opacity: 0; transform: translateY(4cqw); } }
@keyframes cv-in-letters { from { opacity: 0; } }
@keyframes cv-in-lines { from { opacity: 0; } }
@keyframes cv-in-slide-up { from { opacity: 0; transform: translateY(14cqw); } }
@keyframes cv-in-slide-down { from { opacity: 0; transform: translateY(-14cqw); } }
@keyframes cv-in-slide-left { from { opacity: 0; transform: translateX(14cqw); } }
@keyframes cv-in-slide-right { from { opacity: 0; transform: translateX(-14cqw); } }
@keyframes cv-in-zoom { from { opacity: 0; transform: scale(.6); } }
@keyframes cv-in-zoomout { from { opacity: 0; transform: scale(1.45); } }
@keyframes cv-in-pop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cv-in-rotate { from { opacity: 0; transform: rotate(-25deg) scale(.9); } }
@keyframes cv-in-spin { from { opacity: 0; transform: rotate(-360deg) scale(.4); } }
@keyframes cv-in-flip-up { from { opacity: 0; transform: perspective(80cqw) rotateX(90deg); } }
@keyframes cv-in-flip-down { from { opacity: 0; transform: perspective(80cqw) rotateX(-90deg); } }
@keyframes cv-in-flip-left { from { opacity: 0; transform: perspective(80cqw) rotateY(-90deg); } }
@keyframes cv-in-flip-right { from { opacity: 0; transform: perspective(80cqw) rotateY(90deg); } }
@keyframes cv-in-bounce { 0% { opacity: 0; transform: translateY(-14cqw); } 45% { opacity: 1; transform: translateY(0); } 62% { transform: translateY(-4cqw); } 78% { transform: translateY(0); } 90% { transform: translateY(-1.2cqw); } 100% { transform: none; } }
@keyframes cv-in-drop { 0% { opacity: 0; transform: translateY(-22cqw); } 60% { opacity: 1; transform: translateY(1.5cqw); } 80% { transform: translateY(-.6cqw); } 100% { transform: none; } }
@keyframes cv-in-blur { from { opacity: 0; filter: blur(14px); } }
@keyframes cv-in-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes cv-in-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes cv-in-wipe-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes cv-in-wipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes cv-in-reveal { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes cv-in-typewriter { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes cv-in-tracking { from { opacity: 0; --cv-trk: .55em; filter: blur(3px); } }
@keyframes cv-in-swing { 0% { opacity: 0; transform-origin: top center; transform: rotate(-14deg); } 40% { opacity: 1; transform: rotate(9deg); } 65% { transform: rotate(-5deg); } 85% { transform: rotate(2deg); } 100% { transform-origin: top center; transform: none; } }

@keyframes cv-out-fade { to { opacity: 0; } }
@keyframes cv-out-slide-up { to { opacity: 0; transform: translateY(-14cqw); } }
@keyframes cv-out-slide-down { to { opacity: 0; transform: translateY(14cqw); } }
@keyframes cv-out-slide-left { to { opacity: 0; transform: translateX(-14cqw); } }
@keyframes cv-out-slide-right { to { opacity: 0; transform: translateX(14cqw); } }
@keyframes cv-out-zoom { to { opacity: 0; transform: scale(.5); } }
@keyframes cv-out-grow { to { opacity: 0; transform: scale(1.5); } }
@keyframes cv-out-blur { to { opacity: 0; filter: blur(14px); } }
@keyframes cv-out-wipe-up { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes cv-out-wipe-down { from { clip-path: inset(0); } to { clip-path: inset(100% 0 0 0); } }
@keyframes cv-out-wipe-left { from { clip-path: inset(0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes cv-out-wipe-right { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes cv-out-rotate { to { opacity: 0; transform: rotate(25deg) scale(.9); } }
@keyframes cv-out-flip-up { to { opacity: 0; transform: perspective(80cqw) rotateX(-90deg); } }
@keyframes cv-out-flip-down { to { opacity: 0; transform: perspective(80cqw) rotateX(90deg); } }
@keyframes cv-out-flip-left { to { opacity: 0; transform: perspective(80cqw) rotateY(90deg); } }
@keyframes cv-out-flip-right { to { opacity: 0; transform: perspective(80cqw) rotateY(-90deg); } }
@keyframes cv-out-drop { to { opacity: 0; transform: translateY(20cqw) rotate(8deg); } }

@keyframes cv-loop-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6cqw); } }
@keyframes cv-loop-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cv-loop-heartbeat { 0%, 70%, 100% { transform: scale(1); } 14%, 42% { transform: scale(1.12); } 28% { transform: scale(1); } }
@keyframes cv-loop-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-.7cqw); } 20%, 40%, 60%, 80% { transform: translateX(.7cqw); } }
@keyframes cv-loop-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes cv-loop-sway { 0%, 100% { transform-origin: bottom center; transform: rotate(-3deg); } 50% { transform-origin: bottom center; transform: rotate(3deg); } }
@keyframes cv-loop-spin { to { transform: rotate(360deg); } }
@keyframes cv-loop-shimmer {
  0% { -webkit-mask-image: linear-gradient(-70deg, #000 40%, rgba(0, 0, 0, .45) 50%, #000 60%); mask-image: linear-gradient(-70deg, #000 40%, rgba(0, 0, 0, .45) 50%, #000 60%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: brightness(1); }
  50% { filter: brightness(1.12); }
  100% { -webkit-mask-image: linear-gradient(-70deg, #000 40%, rgba(0, 0, 0, .45) 50%, #000 60%); mask-image: linear-gradient(-70deg, #000 40%, rgba(0, 0, 0, .45) 50%, #000 60%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; filter: brightness(1); }
}
@keyframes cv-loop-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 236, 190, 0)); } 50% { filter: drop-shadow(0 0 1.4cqw rgba(255, 236, 190, .95)); } }
@keyframes cv-loop-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Less motion, when the guest's device asks for it: everything is simply there. */
@media (prefers-reduced-motion: reduce) {
  .cv-a, .cv-box, .cv-tw-ch, .cv-sp-c { animation: none !important; opacity: 1 !important; }
  .cv-sp-c { transform: none !important; }
  .cv-fx { display: none; }
  .cv-opener:hover { scale: none; }
  .cv-op.is-opening, .cv-op.is-opening * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* The venue on Google's map; a drawn stand-in where the map cannot be shown (the studio's canvas, no venue yet). */
.cv-map { display: block; box-sizing: border-box; inline-size: 100%; block-size: 100%; border: calc(var(--bw, 0) / var(--sw) * 100cqw) solid var(--bc, transparent);
  border-radius: calc(var(--rad, 0) / var(--sw) * 100cqw); box-shadow: var(--ish, none); filter: var(--flt, none); background: #E9E5DC; overflow: hidden; }
.cv-map--plan { position: relative; display: grid; place-items: center; align-content: center; gap: 4cqw;
  background: linear-gradient(28deg, transparent 46%, #F7F4EE 46% 50%, transparent 50%), linear-gradient(-62deg, transparent 58%, #F7F4EE 58% 61%, transparent 61%),
    linear-gradient(90deg, transparent 30%, #F2EFE8 30% 32%, transparent 32%), linear-gradient(0deg, transparent 64%, #F2EFE8 64% 66%, transparent 66%), #E3DED2; }
.cv-map__pin { inline-size: min(9cqw, 44px); aspect-ratio: 1; border-radius: 50% 50% 50% 0; rotate: -45deg; background: radial-gradient(circle, #fff 0 22%, #C5221F 23%); box-shadow: -2px 2px 6px rgba(0, 0, 0, .25); }
.cv-map__name { padding: .3em .8em; border-radius: 999px; background: rgba(255, 255, 255, .9); font: 500 clamp(10px, 4cqw, 18px)/1.2 "Jost", system-ui, sans-serif; color: #3C3A36; }