/* Collection "modern": minimal, editorial, geometric. Contract: docs/invitation-templates.md.
   Every template has its own idea: Editorial (magazine cover over a full-bleed photo), Minimal (type only),
   Geometric (thin gold crystal frame), Marmură (marble and gold veins), Arcadă (overlapping arches),
   Poster (colour block and big type), Linie fină (one-line drawing of the couple), Dungi (cabana stripes, a
   scalloped awning edge and a notched label), Unduire (layered soft waves and a wavy-topped card). */

/* ================= Editorial: a magazine cover. Full-bleed photo, masthead, left-aligned type ================= */

.inv--editorial {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --inv-align: left;
    --inv-items: flex-start;
    --names-weight: 400;
    --names-size: clamp(3.1rem, 15cqi, 6.4rem);
    --names-line: .94;
    --names-spacing: -.01em;
    --names-shadow: none;
    --amp-size: .46em;
    --kicker-size: .62rem;
    --kicker-spacing: .34em;
    --kicker-weight: 600;
    --date-size: .74rem;
    --date-spacing: .34em;
    --date-weight: 600;
    --heading-size: 2.35rem;
    --heading-weight: 400;
    --label-weight: 600;
    --message-size: 1.36rem;
    --hero-halo: none;
    --hero-pad: 110px 24px 78px;
    --hero-justify: flex-end;
    --hero-content-pad: 0 0 8px;
    --cover-shade: color-mix(in srgb, var(--inv-primary) 28%, #000);
    --hero-photo-overlay: linear-gradient(180deg, color-mix(in srgb, var(--cover-shade) 45%, transparent), transparent 22%, color-mix(in srgb, var(--cover-shade) 8%, transparent) 44%, color-mix(in srgb, var(--cover-shade) 78%, transparent));
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-shadow: none;
    --card-border: 0 solid transparent;
    --card-pad: 36px 24px 44px;
    --box-bg: none;
    --box-border: 0 solid transparent;
    --box-radius: 0;
    --box-shadow: none;
    --photo-radius: 0;
    --photo-shadow: none;
    --button-radius: 0;
    --monogram-radius: 0;
    --seal-radius: 0;
    --env-radius: 0;
}

.inv--editorial .inv-hero {
    margin-inline: -16px;
    overflow: hidden;
    isolation: isolate;
    background: color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg));
}

/* Masthead: a tracked title and a hairline across the top of the cover. */
.inv--editorial .inv-hero::before {
    content: "Invitație" / "";
    position: absolute;
    top: 30px;
    left: 24px;
    right: 24px;
    z-index: 1;
    padding-bottom: 10px;
    border-bottom: 1px solid currentColor;
    font: 600 .6rem/1 "Montserrat", "Segoe UI", sans-serif;
    letter-spacing: .6em;
    text-transform: uppercase;
    color: var(--inv-primary);
}

.inv--editorial .inv-hero:has(.inv-hero__image) {
    background: #1a1a1a;
    --names-color: #fff;
    --kicker-color: #fff;
}

.inv--editorial .inv-hero:has(.inv-hero__image)::before,
.inv--editorial .inv-hero:has(.inv-hero__image) .inv-hero__date {
    color: #fff;
}

.inv--editorial .inv-hero:has(.inv-hero__image) .inv-hero__place {
    color: rgba(255, 255, 255, .88);
}

.inv--editorial .inv-hero:has(.inv-hero__image) .inv-hero__scroll span {
    border-color: #fff;
}

.inv--editorial .inv-hero__image,
.inv--editorial .inv-hero__overlay {
    display: block;
}

.inv--editorial .inv-hero__image {
    transform-origin: 60% 35%;
    animation: modern-cover-zoom 18s ease-out both;
}

.inv--editorial .inv-hero__names {
    margin-top: 2px;
}

.inv--editorial .inv-hero__kicker {
    margin: 0 0 16px;
}

/* A hairline under the names, full width of the text column, then date and place. */
.inv--editorial .orn--hero-divider {
    display: block;
    width: 100%;
    max-width: none;
    height: 1px;
    aspect-ratio: auto;
    margin: 26px 0 0;
    -webkit-mask: none;
    mask: none;
    background: currentColor;
    opacity: .55;
}

.inv--editorial .inv-hero:has(.inv-hero__image) .orn--hero-divider {
    background: #fff;
}

.inv--editorial .inv-hero__date {
    margin: 16px 0 4px;
}

.inv--editorial .inv-photo {
    display: none;
}

/* Numbered sections, like the pages of a magazine. */
.inv--editorial .inv-card {
    margin-inline: -16px;
    counter-reset: modern-section;
}

.inv--editorial .inv-heading::before {
    counter-increment: modern-section;
    content: counter(modern-section, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--inv-line);
    font: 600 .62rem/1 "Montserrat", "Segoe UI", sans-serif;
    letter-spacing: .3em;
    color: var(--inv-muted);
}

/* Drop cap on the message. */
.inv--editorial .inv-message p {
    margin: 0;
}

.inv--editorial .inv-message p::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    font: 400 4.1em/.8 "Playfair Display", Georgia, serif;
    font-style: normal;
    color: var(--inv-primary);
}

.inv--editorial .inv-family__grid {
    gap: 0;
}

.inv--editorial .inv-family__item {
    padding: 14px 0;
    border-bottom: 1px solid var(--inv-line);
}

.inv--editorial .inv-divider {
    padding: 14px 0;
}

.inv--editorial .inv-divider__rule {
    width: 100%;
}

.inv--editorial .inv-countdown {
    margin-inline: 0;
    gap: 0;
}

.inv--editorial .inv-countdown > div {
    padding: 12px 0 10px;
    border-top: 2px solid var(--inv-primary);
    text-align: left;
}

.inv--editorial .inv-countdown span {
    font-size: 2.2rem;
}

.inv--editorial .inv-countdown small {
    letter-spacing: .14em;
}

.inv--editorial .inv-program__list {
    gap: 0;
}

.inv--editorial .inv-program__item {
    padding: 20px 0 22px 66px;
    border-top: 1px solid var(--inv-line);
}

.inv--editorial .inv-program__index {
    top: 20px;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    background: none;
    font: 400 italic 2.6rem/1 "Playfair Display", Georgia, serif;
    color: var(--inv-primary);
}

.inv--editorial .inv-map__links {
    margin-inline: 0;
}

.inv--editorial .inv-closing__names {
    font-size: 2.6rem;
}

@keyframes modern-cover-zoom {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

/* ================= Minimal: typography and colour only, left aligned, bottom of the first screen ================= */

.inv--minimal {
    --f-display: "DM Serif Display", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --inv-align: left;
    --inv-items: flex-start;
    --names-weight: 400;
    --names-size: clamp(3.1rem, 16cqi, 6.6rem);
    --names-line: .96;
    --names-spacing: -.015em;
    --names-color: var(--inv-text);
    --names-shadow: none;
    --amp-color: var(--inv-primary);
    --amp-size: .62em;
    --kicker-color: var(--inv-primary);
    --kicker-spacing: .3em;
    --date-font: "DM Serif Display", Georgia, serif;
    --date-size: 1.35rem;
    --date-spacing: 0;
    --date-short-display: none;
    --date-long-display: block;
    --heading-size: 2.2rem;
    --heading-weight: 400;
    --heading-color: var(--inv-text);
    --message-size: 1.28rem;
    --hero-halo: none;
    --hero-justify: flex-end;
    --hero-pad: 72px 12px 96px;
    --hero-content-pad: 0;
    --card-bg: transparent;
    --card-shadow: none;
    --card-radius: 0;
    --card-pad: 36px 12px;
    --box-bg: none;
    --box-shadow: none;
    --box-radius: 0;
    --box-border: 0 solid transparent;
    --index-display: none;
    --photo-radius: 0;
    --photo-shadow: none;
    --photo-width: 100%;
    --divider-rule-display: none;
    --button-radius: 0;
    --monogram-radius: 0;
    --seal-radius: 0;
    --env-radius: 0;
}

/* A short line before the kicker. */
.inv--minimal .inv-hero__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inv--minimal .inv-hero__kicker::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

/* A short solid bar under the names: an ornament slot without a mask is a plain block of colour. */
.inv--minimal .orn--hero-divider,
.inv--minimal .orn--heading,
.inv--minimal .orn--divider {
    display: block;
    width: 64px;
    height: 3px;
    aspect-ratio: auto;
    margin: 26px 0 0;
    -webkit-mask: none;
    mask: none;
    background: var(--inv-primary);
}

.inv--minimal .orn--heading {
    width: 40px;
    margin: -8px 0 24px;
}

.inv--minimal .orn--divider {
    width: 100%;
    height: 1px;
    max-width: none;
    margin: 0;
    background: var(--inv-line);
}

.inv--minimal .inv-hero__date {
    margin: 22px 0 4px;
}

.inv--minimal .inv-hero__place {
    letter-spacing: .2em;
}

.inv--minimal .inv-message p {
    margin: 0;
}

.inv--minimal .inv-family__item,
.inv--minimal .inv-program__item,
.inv--minimal .inv-countdown > div {
    border-left: 3px solid var(--inv-primary);
    padding-left: 16px;
}

.inv--minimal .inv-program__item {
    padding-top: 4px;
    padding-bottom: 4px;
}

.inv--minimal .inv-countdown > div {
    padding-left: 10px;
    text-align: left;
}

.inv--minimal .inv-countdown small {
    letter-spacing: .12em;
}

.inv--minimal .inv-photo__frame,
.inv--minimal .inv-countdown,
.inv--minimal .inv-map__links {
    margin-left: 0;
}

/* ================= Geometric: thin gold crystal frame (hexagon over rectangle), spaced capitals ================= */

.inv--geometric {
    --f-display: "Josefin Sans", "Segoe UI", sans-serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Josefin Sans", "Segoe UI", sans-serif;
    --gold: linear-gradient(160deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 45%, #fff) 38%, var(--inv-ornament) 62%, color-mix(in srgb, var(--inv-ornament) 78%, #000));
    --names-weight: 300;
    --names-size: clamp(2.3rem, 11cqi, 4.4rem);
    --names-spacing: .02em;
    --names-line: 1.08;
    --names-shadow: none;
    --names-transform: uppercase;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-size: .7em;
    --kicker-size: .6rem;
    --kicker-spacing: .3em;
    --kicker-weight: 400;
    --date-weight: 400;
    --date-spacing: .5em;
    --date-size: .8rem;
    --heading-size: 1.5rem;
    --heading-weight: 300;
    --heading-transform: uppercase;
    --heading-spacing: .2em;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --message-size: 1.35rem;
    --label-weight: 400;
    --hero-pad: 104px 12px 112px;
    --hero-halo: none;
    --card-radius: 0;
    --card-bg: var(--inv-surface);
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    --card-shadow: 0 30px 60px -36px rgba(0, 0, 0, .35);
    --box-bg: transparent;
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    --box-radius: 0;
    --box-shadow: none;
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-shadow: none;
    --photo-clip: polygon(50% 0, 100% 13%, 100% 87%, 50% 100%, 0 87%, 0 13%);
    --divider-rule-display: none;
    --button-radius: 0;
    --monogram-font: "Cormorant Garamond", Georgia, serif;
    --closing-size: 2.1rem;
    --seal-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 70%, #fff), color-mix(in srgb, var(--inv-ornament) 80%, #000) 60%, color-mix(in srgb, var(--inv-ornament) 60%, #000));
}

.inv--geometric .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--inv-accent) 70%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 35%, var(--inv-bg)));
}

.inv--geometric .inv-hero__frame {
    display: block;
    inset: 20px 0 50px;
    border: 0;
    background: var(--gold);
    -webkit-mask: url(../../img/invitations/ornaments/modern-geo-frame.svg) 0 0 / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/modern-geo-frame.svg) 0 0 / 100% 100% no-repeat;
}

.inv--geometric .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-geo-gem.svg);
    --orn-ratio: 160 / 64;
    --orn-width: 52%;
    --orn-max: 190px;
    --orn-fill: var(--gold);
}

.inv--geometric .orn--hero-divider,
.inv--geometric .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-geo-divider.svg);
    --orn-ratio: 280 / 40;
    --orn-fill: var(--gold);
}

.inv--geometric .orn--hero-divider {
    --orn-width: 62%;
    --orn-max: 230px;
    --orn-margin: 20px auto 0;
}

.inv--geometric .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/line-diamond.svg);
    --orn-ratio: 240 / 20;
    --orn-width: 40%;
    --orn-max: 150px;
    --orn-margin: -8px auto 24px;
}

.inv--geometric .inv-hero__amp {
    color: var(--inv-muted);
}

.inv--geometric .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/modern-geo-corner.svg);
    --corner-size: 26%;
    --corner-max: 112px;
    --corner-inset: 8px;
    --corner-fill: var(--gold);
    --corner-opacity: .85;
}

.inv--geometric .inv-photo__frame {
    position: relative;
}

.inv--geometric .inv-photo__frame::after {
    content: "";
    position: absolute;
    inset: 10px;
    background: #fff;
    -webkit-mask: url(../../img/invitations/ornaments/modern-geo-hex.svg) 0 0 / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/modern-geo-hex.svg) 0 0 / 100% 100% no-repeat;
    opacity: .8;
}

.inv--geometric .inv-program__index {
    width: 34px;
    height: 32px;
    margin-left: -17px;
    top: -16px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background: var(--inv-primary);
    color: var(--inv-on-primary);
}

.inv--geometric .inv-countdown small {
    letter-spacing: .1em;
}

.inv--geometric .inv-monogram,
.inv--geometric .inv-envelope__seal {
    clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
    border: 0;
    box-shadow: none;
}

.inv--geometric .inv-monogram {
    width: 76px;
    height: 66px;
    background: var(--inv-accent);
    color: var(--inv-primary);
    font-size: 1.2rem;
}

.inv--geometric .inv-envelope__seal {
    width: 66px;
    height: 58px;
    margin: -29px 0 0 -33px;
    font-family: "Josefin Sans", "Segoe UI", sans-serif;
}

/* ================= Marmură: marble slab, gold veins, two thin gold rings around the names ================= */

.inv--marmura {
    --f-display: "Gilda Display", Georgia, serif;
    --f-body: "Tenor Sans", "Segoe UI", sans-serif;
    --gold: linear-gradient(125deg, color-mix(in srgb, var(--inv-ornament) 75%, #000), var(--inv-ornament) 28%, color-mix(in srgb, var(--inv-ornament) 40%, #fff) 48%, var(--inv-ornament) 66%, color-mix(in srgb, var(--inv-ornament) 80%, #000));
    --names-weight: 400;
    --names-size: clamp(2.9rem, 14.5cqi, 5.4rem);
    --names-line: 1.04;
    --names-color: var(--inv-text);
    --names-shadow: none;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-size: .66em;
    --amp-color: var(--inv-primary);
    --kicker-size: .64rem;
    --kicker-weight: 400;
    --kicker-spacing: .42em;
    --kicker-color: var(--inv-muted);
    --date-font: "Gilda Display", Georgia, serif;
    --date-size: 1.02rem;
    --date-spacing: .32em;
    --heading-size: 2.05rem;
    --heading-weight: 400;
    --heading-color: var(--inv-text);
    --label-weight: 400;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --message-size: 1.38rem;
    --body-weight: 400;
    /* A soft pool of the slab colour behind the text calms the veins under the kicker and the place. */
    --hero-halo: radial-gradient(farthest-side, color-mix(in srgb, var(--inv-bg) 82%, transparent) 62%, transparent);
    --hero-content-pad: 40px 18px;
    --hero-pad: 56px 0 76px;
    --card-bg: color-mix(in srgb, var(--inv-surface) 90%, transparent);
    --card-radius: 2px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    --card-shadow: 0 34px 70px -40px rgba(0, 0, 0, .4);
    --box-bg: var(--inv-surface);
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    --box-radius: 2px;
    --box-shadow: inset 0 2px 0 var(--inv-ornament), 0 14px 30px -24px rgba(0, 0, 0, .4);
    --photo-width: min(84%, 300px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 8px var(--inv-ornament), 0 24px 44px -24px rgba(0, 0, 0, .5);
    --divider-rule-display: none;
    --button-font: "Tenor Sans", "Segoe UI", sans-serif;
    --button-radius: 0;
    --monogram-font: "Gilda Display", Georgia, serif;
    --seal-fill: var(--gold);
    --env-front: linear-gradient(160deg, var(--inv-surface), var(--inv-accent));
    --env-flap: linear-gradient(180deg, var(--inv-accent), var(--inv-surface));
    --env-fill: var(--inv-accent);
}

.inv--marmura .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/modern-marble.svg);
    --texture-size: 640px;
    --texture-opacity: .42;
    --texture-fill: color-mix(in srgb, var(--inv-text) 60%, var(--inv-ornament));
}

.inv--marmura.inv--dark .inv__texture {
    --texture-opacity: .34;
}

/* Gold veins crossing the slab from two opposite corners. */
.inv--marmura .inv-hero__corner {
    display: block;
    max-width: 330px;
    --hero-corner-image: url(../../img/invitations/ornaments/modern-marble-vein.svg);
    --hero-corner-size: 84%;
    --hero-corner-inset: 0;
    --hero-corner-fill: var(--gold);
    --hero-corner-opacity: .9;
}

.inv--marmura .inv-hero__corner--tl { left: -16px; }
.inv--marmura .inv-hero__corner--br { right: -16px; }

.inv--marmura .inv-hero__corner--tr,
.inv--marmura .inv-hero__corner--bl {
    display: none;
}

/* Two interlaced thin gold rings behind the names. */
.inv--marmura .inv-hero__names {
    position: relative;
    margin: 44px 0;
}

.inv--marmura .inv-hero__names::before,
.inv--marmura .inv-hero__names::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    height: calc(100% + 64px);
    max-width: min(320px, 92cqi);
    aspect-ratio: 1;
    border: 1px solid var(--inv-ornament);
    border-radius: 50%;
    transform: translate(-58%, -50%);
}

.inv--marmura .inv-hero__names::after {
    height: calc(100% + 40px);
    opacity: .55;
    transform: translate(-38%, -52%);
}

.inv--marmura .inv-hero__kicker {
    margin: 0;
}

.inv--marmura .inv-hero__date {
    margin: 0 0 8px;
}

.inv--marmura .orn--hero-divider,
.inv--marmura .orn--divider,
.inv--marmura .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-marble-divider.svg);
    --orn-ratio: 300 / 30;
    --orn-fill: linear-gradient(90deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 70%, #000) 50%, var(--inv-ornament));
}

.inv--marmura .orn--hero-divider {
    --orn-width: 56%;
    --orn-max: 210px;
    --orn-margin: 0 auto 18px;
}

.inv--marmura .orn--heading {
    --orn-width: 46%;
    --orn-max: 170px;
    --orn-margin: -8px auto 24px;
}

.inv--marmura .inv-program__index {
    border-color: var(--inv-ornament);
    background: var(--inv-surface);
    font-family: "Gilda Display", Georgia, serif;
}

.inv--marmura .inv-countdown span {
    font-size: 2.2rem;
}

.inv--marmura .inv-countdown small {
    letter-spacing: .12em;
}

.inv--marmura .inv-monogram {
    border-color: var(--inv-ornament);
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 55%, transparent);
}

.inv--marmura .inv-envelope__front {
    overflow: hidden;
}

.inv--marmura .inv-envelope__front::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--inv-text) 60%, var(--inv-ornament));
    -webkit-mask: url(../../img/invitations/textures/modern-marble.svg) 0 0 / 320px;
    mask: url(../../img/invitations/textures/modern-marble.svg) 0 0 / 320px;
    opacity: .45;
}

/* ================= Arcadă: overlapping arches in sand and terracotta, an arched card ================= */

.inv--arcada {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --names-weight: 300;
    --names-size: clamp(2.7rem, 13.5cqi, 5rem);
    --names-line: 1;
    --names-shadow: none;
    --amp-size: .62em;
    --kicker-size: .62rem;
    --kicker-spacing: .3em;
    --kicker-weight: 400;
    --date-size: .78rem;
    --date-spacing: .34em;
    --date-weight: 400;
    --heading-style: italic;
    --heading-size: 2.2rem;
    --heading-weight: 300;
    --text-display-font: "Fraunces", Georgia, serif;
    --message-size: 1.2rem;
    --message-style: normal;
    --family-size: 1.1rem;
    --hero-halo: none;
    --hero-pad: 92px 8px 104px;
    --card-bg: var(--inv-surface);
    --card-radius: 999px 999px 26px 26px;
    --card-pad: 112px 22px 48px;
    --card-shadow: 0 30px 60px -40px rgba(60, 30, 10, .45);
    --box-bg: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 20px;
    --box-shadow: none;
    --photo-width: min(80%, 300px);
    --photo-ratio: 3 / 4;
    --photo-radius: 999px 999px 0 0;
    --photo-shadow: -16px 16px 0 0 color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    --divider-rule-display: none;
    --button-radius: 999px;
    --button-spacing: .18em;
    --monogram-radius: 999px 999px 6px 6px;
    --seal-radius: 999px 999px 6px 6px;
    --env-radius: 14px;
}

/* The first screen: a sand arch window, a terracotta arch offset behind it and an outlined arch in front. */
.inv--arcada .inv-hero__frame {
    display: block;
    inset: 40px 14px 58px 26px;
    border: 0;
    border-radius: 999px 999px 0 0;
    background: color-mix(in srgb, var(--inv-accent) 72%, var(--inv-surface));
    box-shadow: -16px 0 0 0 color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-bg));
}

.inv--arcada .inv-hero__frame::after {
    content: "";
    position: absolute;
    inset: -16px -8px 0 18px;
    border: 1.5px solid color-mix(in srgb, var(--inv-primary) 55%, transparent);
    border-radius: 999px 999px 0 0;
}

/* A small sun resting on the arch. */
.inv--arcada .inv-hero__frame::before {
    content: "";
    position: absolute;
    top: 18%;
    right: -6px;
    width: 46px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--inv-ornament);
}

.inv--arcada .inv-hero__content {
    margin-left: 12px;
}

.inv--arcada .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-arch-motif.svg);
    --orn-ratio: 200 / 120;
    --orn-width: 34%;
    --orn-max: 130px;
    --orn-fill: var(--inv-primary);
}

.inv--arcada .orn--hero-divider,
.inv--arcada .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-arch-divider.svg);
    --orn-ratio: 240 / 30;
    --orn-fill: var(--inv-primary);
}

.inv--arcada .orn--hero-divider {
    --orn-width: 56%;
    --orn-max: 200px;
    --orn-margin: 20px auto 0;
}

.inv--arcada .orn--divider {
    --orn-width: 70%;
    --orn-max: 260px;
}

.inv--arcada .inv-hero__amp {
    color: var(--inv-muted);
}

.inv--arcada .inv-photo__frame {
    margin-left: auto;
    margin-right: 12px;
}

.inv--arcada .inv-program__item {
    padding: 58px 22px 26px;
    border-radius: 999px 999px 20px 20px;
}

.inv--arcada .inv-program__index {
    top: 18px;
    border: 0;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
}

.inv--arcada .inv-countdown > div {
    padding-top: 22px;
    border-radius: 999px 999px 8px 8px;
}

.inv--arcada .inv-countdown span {
    font-size: 2.1rem;
}

.inv--arcada .inv-countdown small {
    letter-spacing: .12em;
}

.inv--arcada .inv-monogram {
    width: 60px;
    height: 76px;
    border: 0;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    box-shadow: -8px 8px 0 0 color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    font-family: "Fraunces", Georgia, serif;
}

.inv--arcada .inv-envelope__seal {
    width: 52px;
    height: 64px;
    margin: -32px 0 0 -26px;
    background: var(--inv-primary);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
    color: var(--inv-on-primary);
    font-family: "Fraunces", Georgia, serif;
}

/* ================= Poster: a full-bleed colour block, big serif type, a circle, blocks of colour ================= */

.inv--poster {
    --f-display: "Abril Fatface", Georgia, serif;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --inv-align: left;
    --inv-items: flex-start;
    --names-weight: 400;
    --names-size: clamp(3rem, 14.5cqi, 6.8rem);
    --names-line: .9;
    --names-color: var(--inv-on-primary);
    --names-shadow: none;
    --amp-font: "Bodoni Moda", Georgia, serif;
    --amp-size: .56em;
    --kicker-font: "Poppins", "Segoe UI", sans-serif;
    --kicker-size: .64rem;
    --kicker-weight: 600;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-on-primary);
    --date-font: "Abril Fatface", Georgia, serif;
    --date-size: clamp(2.4rem, 12.5cqi, 4.6rem);
    --date-spacing: -.01em;
    --heading-size: 2.5rem;
    --heading-weight: 400;
    --heading-color: var(--inv-text);
    --label-weight: 600;
    --label-spacing: .22em;
    --text-display-font: "Bodoni Moda", Georgia, serif;
    --message-size: 1.34rem;
    --body-weight: 300;
    --hero-halo: none;
    --hero-pad: 96px 24px 84px;
    --hero-justify: flex-end;
    --hero-content-pad: 0;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-border: 0 solid transparent;
    --card-shadow: 0 24px 50px -30px rgba(0, 0, 0, .45);
    --card-pad: 40px 22px 44px;
    --card-margin-top: -34px;
    --box-bg: var(--inv-accent);
    --box-border: 0 solid transparent;
    --box-radius: 0;
    --box-shadow: none;
    --photo-width: min(88%, 330px);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-shadow: 14px 14px 0 0 var(--inv-primary);
    --divider-rule-display: none;
    --button-font: "Poppins", "Segoe UI", sans-serif;
    --button-radius: 0;
    --button-spacing: .16em;
    --monogram-font: "Abril Fatface", Georgia, serif;
    --monogram-radius: 0;
    --closing-size: 2.7rem;
    --seal-radius: 50%;
    --seal-fill: var(--inv-primary);
    --seal-color: var(--inv-on-primary);
    --env-radius: 0;
    --env-bg: var(--inv-bg);
}

.inv--poster .inv-hero {
    margin-inline: -16px;
    overflow: hidden;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
}

/* A big circle and a thin ring: the geometry of the poster. */
.inv--poster .inv-hero::before {
    content: "";
    position: absolute;
    top: -64px;
    right: -14%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--inv-ornament);
}

.inv--poster .inv-hero::after {
    content: "";
    position: absolute;
    top: 44px;
    right: 30%;
    width: 26%;
    aspect-ratio: 1;
    border: 1.5px solid var(--inv-on-primary);
    border-radius: 50%;
    opacity: .5;
}

.inv--poster .inv-hero__kicker {
    order: -1;
    margin: 0 0 18px;
    padding: 7px 10px 6px;
    background: var(--inv-on-primary);
    color: var(--inv-primary);
    line-height: 1.3;
}

.inv--poster .inv-hero__amp {
    margin: .02em 0 .06em;
}

.inv--poster .orn--hero-divider {
    display: block;
    width: 100%;
    max-width: none;
    height: 6px;
    aspect-ratio: auto;
    margin: 26px 0 0;
    -webkit-mask: none;
    mask: none;
    background: var(--inv-on-primary);
}

.inv--poster .inv-hero__date {
    margin: 14px 0 8px;
    line-height: 1;
}

.inv--poster .inv-hero__place {
    color: var(--inv-on-primary);
    font-weight: 600;
    letter-spacing: .2em;
}

.inv--poster .inv-hero__scroll {
    left: auto;
    right: 24px;
    bottom: 48px;
}

.inv--poster .inv-hero__scroll span {
    border-color: var(--inv-on-primary);
}

.inv--poster .inv-card {
    margin-inline: -4px;
}

.inv--poster .inv-message p {
    margin: 0;
    font-style: italic;
}

.inv--poster .orn--heading {
    display: block;
    width: 56px;
    height: 7px;
    aspect-ratio: auto;
    margin: -10px 0 24px;
    -webkit-mask: none;
    mask: none;
    background: var(--inv-primary);
}

.inv--poster .orn--divider {
    display: block;
    width: 100%;
    max-width: none;
    height: 3px;
    aspect-ratio: auto;
    margin: 0;
    -webkit-mask: none;
    mask: none;
    background: var(--inv-text);
}

.inv--poster .inv-photo__frame {
    position: relative;
    margin-left: 0;
    --photo-filter: grayscale(1) contrast(1.08);
}

.inv--poster .inv-photo__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inv-primary);
    mix-blend-mode: screen;
}

.inv--poster .inv-family__item {
    padding: 16px 16px 14px;
}

.inv--poster .inv-countdown {
    margin-inline: 0;
    gap: 6px;
}

.inv--poster .inv-countdown > div {
    background: var(--inv-primary);
    text-align: left;
    padding: 14px 8px 10px;
}

.inv--poster .inv-countdown span,
.inv--poster .inv-countdown small {
    color: var(--inv-on-primary);
}

.inv--poster .inv-countdown small {
    letter-spacing: .08em;
}

.inv--poster .inv-when__date {
    font-size: 2.4rem;
}

.inv--poster .inv-program__item {
    padding: 22px 18px 22px;
}

.inv--poster .inv-program__index {
    top: 0;
    left: auto;
    right: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--inv-text);
    color: var(--inv-surface);
    font: 400 1.15rem/1 "Abril Fatface", Georgia, serif;
}

.inv--poster .inv-program__time {
    font-size: 2.8rem;
}

.inv--poster .inv-map__links {
    margin-inline: 0;
}

.inv--poster .inv-monogram {
    border: 0;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    box-shadow: 8px 8px 0 0 var(--inv-ornament);
}

.inv--poster .inv-envelope__seal {
    box-shadow: 0 0 0 3px var(--inv-on-primary), 0 6px 14px rgba(0, 0, 0, .3);
    font-family: "Abril Fatface", Georgia, serif;
}

/* ================= Linie fină: a one-line drawing of the couple, fine italic names, hairlines ================= */

.inv--linie-fina {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --names-style: italic;
    --names-weight: 300;
    --names-size: clamp(2.9rem, 14.5cqi, 5.6rem);
    --names-line: 1.04;
    --names-direction: row;
    --names-gap: 0 .22em;
    --names-shadow: none;
    --amp-size: .82em;
    --amp-color: var(--inv-muted);
    --kicker-size: .6rem;
    --kicker-weight: 400;
    --kicker-spacing: .4em;
    --kicker-color: var(--inv-muted);
    --date-size: .76rem;
    --date-weight: 400;
    --date-spacing: .44em;
    --heading-style: italic;
    --heading-weight: 300;
    --heading-size: 2.4rem;
    --message-size: 1.36rem;
    --body-weight: 400;
    --hero-halo: none;
    --hero-pad: 64px 8px 84px;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-border: 1px solid var(--inv-line);
    --card-shadow: none;
    --box-bg: transparent;
    --box-border: 1px solid var(--inv-line);
    --box-radius: 0;
    --box-shadow: none;
    --photo-width: min(78%, 300px);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-shadow: none;
    --divider-rule-display: none;
    --button-radius: 999px;
    --button-spacing: .2em;
    --monogram-font: "Cormorant Garamond", Georgia, serif;
    --seal-fill: var(--inv-primary);
    --seal-color: var(--inv-on-primary);
    --env-front: var(--inv-surface);
    --env-flap: linear-gradient(180deg, var(--inv-accent), var(--inv-surface));
    --env-fill: var(--inv-accent);
    font-variant-numeric: lining-nums;
}

.inv--linie-fina .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-line-couple.svg);
    --orn-ratio: 400 / 300;
    --orn-width: 78cqi;
    --orn-max: 340px;
    --orn-fill: var(--inv-primary);
    --orn-margin: 0 auto 6px;
}

.inv--linie-fina .orn--hero-divider,
.inv--linie-fina .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-line-loop.svg);
    --orn-ratio: 160 / 24;
    --orn-fill: var(--inv-primary);
}

.inv--linie-fina .orn--hero-divider {
    --orn-width: 44%;
    --orn-max: 170px;
    --orn-margin: 18px auto 0;
}

.inv--linie-fina .orn--heading {
    --orn-width: 34%;
    --orn-max: 130px;
    --orn-margin: -10px auto 24px;
}

.inv--linie-fina .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-line-heart.svg);
    --orn-ratio: 300 / 40;
    --orn-width: 86%;
    --orn-max: 320px;
    --orn-fill: var(--inv-primary);
}

.inv--linie-fina .inv-hero__kicker {
    margin-top: 10px;
}

/* A hairline frame floating around the photo. */
.inv--linie-fina .inv-photo__frame {
    overflow: visible;
    outline: 1px solid var(--inv-primary);
    outline-offset: 12px;
}

.inv--linie-fina .inv-photo {
    padding-block: 40px;
}

.inv--linie-fina .inv-countdown {
    gap: 8px;
}

.inv--linie-fina .inv-countdown > div {
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
}

.inv--linie-fina .inv-countdown span {
    font-size: 2rem;
}

.inv--linie-fina .inv-countdown small {
    margin-top: 2px;
    font-size: .54rem;
    letter-spacing: .12em;
}

.inv--linie-fina .inv-program__item {
    border: 0;
    border-top: 1px solid var(--inv-line);
}

.inv--linie-fina .inv-program__index {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1rem;
}

.inv--linie-fina .inv-monogram {
    font-style: italic;
    font-size: 1.3rem;
}

/* ================= Dungi: cabana stripes ending in a scalloped awning edge, a notched label with the names ================= */

.inv--dungi {
    --f-display: "Libre Baskerville", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    /* One stripe is a ninth of the invitation (of the column on wide screens); cqi follows the width of the invitation. */
    --stripe: calc(min(100cqi, 660px) / 9);
    --stripes: linear-gradient(90deg, var(--inv-surface) 25%, var(--inv-primary) 25% 75%, var(--inv-surface) 75%);
    --shade: color-mix(in srgb, var(--inv-text) 20%, transparent);
    --tint: color-mix(in srgb, var(--inv-accent) 46%, var(--inv-surface));
    --names-weight: 700;
    --names-size: clamp(2.1rem, 10cqi, 3.7rem);
    --names-line: 1.14;
    --names-spacing: -.01em;
    --names-shadow: none;
    --amp-size: .7em;
    --amp-color: var(--inv-text);
    --kicker-size: .62rem;
    --kicker-spacing: .26em;
    --date-size: .8rem;
    --date-weight: 500;
    --date-spacing: .3em;
    --heading-size: 1.7rem;
    --heading-weight: 700;
    --heading-color: var(--inv-text);
    --label-spacing: .26em;
    --message-size: 1.1rem;
    --family-size: 1.05rem;
    --closing-size: 1.7rem;
    --body-weight: 400;
    --hero-halo: none;
    --hero-pad: 64px 0 calc(72px + var(--stripe) / 2);
    --hero-content-pad: 30px 22px 36px;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-shadow: 0 7px 0 color-mix(in srgb, var(--inv-text) 9%, transparent);
    --card-pad: 78px 22px 46px;
    --card-pad-wide: 92px 48px 60px;
    --card-margin-top: 34px;
    --box-radius: 0;
    --box-shadow: none;
    --photo-width: min(76%, 300px);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-shadow: none;
    --photo-pad: 3px;
    --photo-bg: var(--inv-primary);
    --divider-rule-display: none;
    --button-radius: 999px;
    --button-spacing: .2em;
    --monogram-radius: 0;
    --seal-radius: 0;
    --seal-fill: var(--inv-primary);
    --seal-color: var(--inv-on-primary);
    --env-radius: 0;
    --env-bg: var(--inv-bg);
    --env-fill: var(--inv-surface);
    --env-front: linear-gradient(170deg, var(--tint), color-mix(in srgb, var(--inv-accent) 72%, var(--inv-surface)));
    --env-flap: var(--stripes) 50% 0 / 40px 100%;
}

/* The awning: nine stripes across the invitation, each one ending in a scallop; a flat shadow under the edge. */
.inv--dungi .inv-hero::before,
.inv--dungi .inv-hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50cqi);
    z-index: -1;
    width: 100cqi;
    -webkit-mask:
        linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--stripe) / 2 + .5px) no-repeat,
        radial-gradient(circle at 50% 0, #000 calc(var(--stripe) / 2 - .7px), transparent calc(var(--stripe) / 2)) 50% 100% / var(--stripe) calc(var(--stripe) / 2) repeat-x;
    mask:
        linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--stripe) / 2 + .5px) no-repeat,
        radial-gradient(circle at 50% 0, #000 calc(var(--stripe) / 2 - .7px), transparent calc(var(--stripe) / 2)) 50% 100% / var(--stripe) calc(var(--stripe) / 2) repeat-x;
}

.inv--dungi .inv-hero::before {
    background: var(--shade);
    transform: translateY(6px);
}

.inv--dungi .inv-hero::after {
    background: var(--stripes) 50% 0 / calc(2 * var(--stripe)) 100%;
}

/* Concave corners, the mark of the label and of the photo. Each shape gives the radius --r of the notch; the inner
   shape of a border also gives --o, how far outside its own corner the centre of the notch lies. */
.inv--dungi .inv-hero__content::before,
.inv--dungi .inv-hero__content::after,
.inv--dungi .inv-photo__frame,
.inv--dungi .inv-photo__frame img {
    --notch: transparent calc(var(--r) - .5px), #000 calc(var(--r) + .5px);
    -webkit-mask:
        radial-gradient(circle at calc(0px - var(--o)) calc(0px - var(--o)), var(--notch)) 0 0 / calc(50% + .5px) calc(50% + .5px) no-repeat,
        radial-gradient(circle at calc(100% + var(--o)) calc(0px - var(--o)), var(--notch)) 100% 0 / calc(50% + .5px) calc(50% + .5px) no-repeat,
        radial-gradient(circle at calc(0px - var(--o)) calc(100% + var(--o)), var(--notch)) 0 100% / calc(50% + .5px) calc(50% + .5px) no-repeat,
        radial-gradient(circle at calc(100% + var(--o)) calc(100% + var(--o)), var(--notch)) 100% 100% / calc(50% + .5px) calc(50% + .5px) no-repeat;
    mask:
        radial-gradient(circle at calc(0px - var(--o)) calc(0px - var(--o)), var(--notch)) 0 0 / calc(50% + .5px) calc(50% + .5px) no-repeat,
        radial-gradient(circle at calc(100% + var(--o)) calc(0px - var(--o)), var(--notch)) 100% 0 / calc(50% + .5px) calc(50% + .5px) no-repeat,
        radial-gradient(circle at calc(0px - var(--o)) calc(100% + var(--o)), var(--notch)) 0 100% / calc(50% + .5px) calc(50% + .5px) no-repeat,
        radial-gradient(circle at calc(100% + var(--o)) calc(100% + var(--o)), var(--notch)) 100% 100% / calc(50% + .5px) calc(50% + .5px) no-repeat;
}

/* The label: seven stripes wide. One layer is its flat shadow; the other paints the surface, the border and a thin
   inner line that both follow the notches (discs and arcs around the four corners, straight sides between them). */
.inv--dungi .inv-hero__content {
    width: calc(7 * var(--stripe));
}

.inv--dungi .inv-hero__content::before,
.inv--dungi .inv-hero__content::after {
    --r: 16px;
    --o: 0px;
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

.inv--dungi .inv-hero__content::before {
    background: var(--shade);
    transform: translateY(7px);
}

.inv--dungi .inv-hero__content::after {
    --edge: var(--inv-primary) 19px, transparent 19.5px;
    --arc: transparent 24.6px, var(--inv-primary) 25.1px 25.9px, transparent 26.4px;
    --side: linear-gradient(var(--inv-primary), var(--inv-primary));
    background:
        radial-gradient(circle at 0 0, var(--edge)) 0 0 / 20px 20px no-repeat,
        radial-gradient(circle at 100% 0, var(--edge)) 100% 0 / 20px 20px no-repeat,
        radial-gradient(circle at 0 100%, var(--edge)) 0 100% / 20px 20px no-repeat,
        radial-gradient(circle at 100% 100%, var(--edge)) 100% 100% / 20px 20px no-repeat,
        var(--side) 0 0 / 100% 3px no-repeat,
        var(--side) 0 100% / 100% 3px no-repeat,
        var(--side) 0 0 / 3px 100% no-repeat,
        var(--side) 100% 0 / 3px 100% no-repeat,
        radial-gradient(circle at -9px -9px, var(--arc)) 9px 9px / 15px 15px no-repeat,
        radial-gradient(circle at calc(100% + 9px) -9px, var(--arc)) calc(100% - 9px) 9px / 15px 15px no-repeat,
        radial-gradient(circle at -9px calc(100% + 9px), var(--arc)) 9px calc(100% - 9px) / 15px 15px no-repeat,
        radial-gradient(circle at calc(100% + 9px) calc(100% + 9px), var(--arc)) calc(100% - 9px) calc(100% - 9px) / 15px 15px no-repeat,
        var(--side) 50% 9px / calc(100% - 47px) 1px no-repeat,
        var(--side) 50% calc(100% - 9px) / calc(100% - 47px) 1px no-repeat,
        var(--side) 9px 50% / 1px calc(100% - 47px) no-repeat,
        var(--side) calc(100% - 9px) 50% / 1px calc(100% - 47px) no-repeat,
        var(--inv-surface);
}

/* A beach parasol seen from above, in two colours, turning slowly. */
.inv--dungi .orn--hero {
    display: block;
    position: relative;
    --orn-image: url(../../img/invitations/ornaments/modern-stripe-disc.svg);
    --orn-ratio: 1;
    --orn-width: 48px;
    --orn-fill: var(--inv-ornament);
    animation: modern-parasol-turn 48s linear infinite;
}

.inv--dungi .orn--hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inv-primary);
    -webkit-mask: url(../../img/invitations/ornaments/modern-stripe-gores.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/modern-stripe-gores.svg) center / contain no-repeat;
}

.inv--dungi .inv-hero__kicker {
    margin: 14px 0 12px;
}

/* One name alone (baptism, birthday) is set larger. */
.inv--dungi .inv-hero__name:only-child {
    font-size: 1.22em;
}

.inv--dungi .inv-hero__amp {
    margin: 0;
    font-weight: 400;
}

/* A short band of fine stripes: under the names and between the sections. */
.inv--dungi .orn--hero-divider,
.inv--dungi .orn--divider {
    display: block;
    width: 78px;
    max-width: none;
    height: 8px;
    aspect-ratio: auto;
    margin: 18px auto 0;
    -webkit-mask: none;
    mask: none;
    background: repeating-linear-gradient(90deg, var(--inv-primary) 0 6px, transparent 6px 12px);
}

.inv--dungi .orn--divider {
    width: 126px;
    margin: 0 auto;
}

.inv--dungi .inv-hero__date {
    margin: 18px 0 10px;
    padding: 8px 14px 8px calc(14px + .3em);
    border-radius: 999px;
    background: var(--inv-primary);
    line-height: 1.25;
    color: var(--inv-on-primary);
}

.inv--dungi .inv-hero__place {
    font-weight: 500;
    letter-spacing: .22em;
}

.inv--dungi .inv-hero__scroll {
    bottom: calc(var(--stripe) / 2 + 18px);
    border-radius: 50%;
    background: var(--inv-surface);
}

.inv--dungi .inv-hero__scroll span {
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-width: 2px;
}

/* A small awning over the card, with its flat shadow. */
.inv--dungi .inv-card::before,
.inv--dungi .orn--card-top {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: 32px;
    aspect-ratio: auto;
    margin: 0;
    background: var(--stripes) 50% 0 / 44px 100%;
    -webkit-mask:
        linear-gradient(#000, #000) 0 0 / 100% 21.5px no-repeat,
        radial-gradient(circle at 50% 0, #000 10.4px, transparent 11px) 50% 100% / 22px 11px repeat-x;
    mask:
        linear-gradient(#000, #000) 0 0 / 100% 21.5px no-repeat,
        radial-gradient(circle at 50% 0, #000 10.4px, transparent 11px) 50% 100% / 22px 11px repeat-x;
}

.inv--dungi .inv-card::before {
    background: var(--shade);
    transform: translateY(4px);
}

.inv--dungi .inv-message p {
    max-width: 24em;
}

/* A row of scallops under each title. */
.inv--dungi .orn--heading {
    display: block;
    width: 70px;
    max-width: none;
    height: 7px;
    aspect-ratio: auto;
    margin: -10px auto 24px;
    background: var(--inv-ornament);
    -webkit-mask: radial-gradient(circle at 50% 0, #000 6.4px, transparent 7px) 50% 0 / 14px 7px repeat-x;
    mask: radial-gradient(circle at 50% 0, #000 6.4px, transparent 7px) 50% 0 / 14px 7px repeat-x;
}

/* The photo stands in front of a striped cabana wall and repeats the notched corners of the label. */
.inv--dungi .inv-photo::before {
    content: "";
    position: absolute;
    top: 23%;
    bottom: 23%;
    left: -22px;
    right: -22px;
    background: var(--stripes) 50% 0 / 44px 100%;
}

@container (min-width: 560px) {
    .inv--dungi .inv-photo::before {
        left: -48px;
        right: -48px;
    }
}

.inv--dungi .inv-photo__frame {
    --r: 18px;
    --o: 0px;
    position: relative;
}

.inv--dungi .inv-photo__frame img {
    --r: 21px;
    --o: 3px;
}

/* Boxes are small labels on the card: a tint of the accent, a fine border, the same concave corners (painted in the
   colour of the card, so nothing is cut). */
.inv--dungi .inv-family__item,
.inv--dungi .inv-program__item,
.inv--dungi .inv-countdown > div {
    --arc: var(--inv-surface) 9.2px, var(--inv-primary) 9.7px 11.1px, transparent 11.6px;
    --side: linear-gradient(var(--inv-primary), var(--inv-primary));
    border: 0;
    background:
        radial-gradient(circle at 0 0, var(--arc)) 0 0 / 12px 12px no-repeat,
        radial-gradient(circle at 100% 0, var(--arc)) 100% 0 / 12px 12px no-repeat,
        radial-gradient(circle at 0 100%, var(--arc)) 0 100% / 12px 12px no-repeat,
        radial-gradient(circle at 100% 100%, var(--arc)) 100% 100% / 12px 12px no-repeat,
        var(--side) 50% 0 / calc(100% - 20px) 1.5px no-repeat,
        var(--side) 50% 100% / calc(100% - 20px) 1.5px no-repeat,
        var(--side) 0 50% / 1.5px calc(100% - 20px) no-repeat,
        var(--side) 100% 50% / 1.5px calc(100% - 20px) no-repeat,
        var(--tint);
}

.inv--dungi .inv-family__item {
    padding: 18px 14px 16px;
}

.inv--dungi .inv-when__date {
    font-size: 1.8rem;
}

.inv--dungi .inv-countdown > div {
    padding: 16px 2px 12px;
}

.inv--dungi .inv-countdown span {
    font-size: 1.7rem;
}

.inv--dungi .inv-countdown small {
    letter-spacing: .12em;
}

.inv--dungi .inv-program__list {
    gap: 14px;
    padding-top: 0;
}

.inv--dungi .inv-program__item {
    padding: 70px 18px 26px;
}

/* The step number, the monogram and the seal sit on a small parasol. */
.inv--dungi .inv-program__index,
.inv--dungi .inv-monogram,
.inv--dungi .inv-envelope__seal {
    border: 0;
    box-shadow: none;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    -webkit-mask: url(../../img/invitations/ornaments/modern-stripe-disc.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/modern-stripe-disc.svg) center / contain no-repeat;
}

.inv--dungi .inv-program__index {
    top: 18px;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    font-weight: 600;
}

.inv--dungi .inv-program__time {
    font-size: 1.9rem;
}

.inv--dungi .inv-map__links a {
    border-radius: 999px;
}

.inv--dungi .inv-program__venue,
.inv--dungi .inv-dress__text {
    font-size: 1.1rem;
}

.inv--dungi .inv-closing__line {
    font-size: 1.15rem;
}

.inv--dungi .inv-monogram {
    width: 86px;
    height: 86px;
    font-weight: 700;
    font-size: .95rem;
}

.inv--dungi .inv-envelope__seal {
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    font-family: "Libre Baskerville", Georgia, serif;
}

.inv--dungi .rsvp-field input,
.inv--dungi .rsvp-field select {
    padding-inline: 18px;
}

.inv--dungi .rsvp-field textarea {
    border-radius: 16px;
}

@keyframes modern-parasol-turn {
    to { transform: rotate(360deg); }
}

/* ================= Unduire: layered soft waves above and below the names, a rounded card with a wavy top edge ================= */

.inv--unduire {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --wave-back: var(--inv-accent);
    --wave-mid: color-mix(in srgb, var(--inv-ornament) 46%, var(--inv-accent));
    --wave-front: color-mix(in srgb, var(--inv-ornament) 88%, var(--inv-primary));
    /* The waves take about a quarter of the first screen, less when long names fill it (they never reach the text). */
    --wave-height: min(23%, max(150px, min(23svh, 207px)));
    --soft: color-mix(in srgb, var(--inv-accent) 32%, var(--inv-surface));
    --pebble: 54% 46% 52% 48% / 48% 54% 46% 52%;
    --names-style: italic;
    --names-weight: 300;
    --names-size: clamp(2.8rem, 13.4cqi, 5.2rem);
    --names-line: 1.04;
    --names-shadow: none;
    --amp-size: .58em;
    --amp-color: var(--inv-muted);
    --kicker-size: .64rem;
    --kicker-weight: 400;
    --kicker-spacing: .36em;
    --kicker-color: var(--inv-muted);
    --date-font: "Fraunces", Georgia, serif;
    --date-size: 1.14rem;
    --date-weight: 300;
    --date-spacing: .03em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-size: 2.1rem;
    --heading-weight: 300;
    --label-weight: 400;
    --label-spacing: .26em;
    --message-size: 1.2rem;
    --message-style: normal;
    --family-size: 1.12rem;
    --closing-size: 2.3rem;
    --body-weight: 400;
    /* A pool of the surface colour in the calm space between the waves, under the texts. */
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-surface) 85%, transparent) 50%, transparent);
    --hero-pad: 96px 0 116px;
    --hero-content-pad: 22px 30px;
    --card-bg: var(--inv-surface);
    --card-radius: 0 0 44px 44px;
    --card-shadow: 0 34px 60px -40px rgba(40, 30, 20, .4);
    --card-pad: 30px 22px 52px;
    --card-pad-wide: 40px 48px 64px;
    --card-margin-top: 46px;
    --box-bg: var(--soft);
    --box-border: 0 solid transparent;
    --box-radius: 28px;
    --box-shadow: none;
    --photo-width: min(78%, 300px);
    --photo-ratio: 4 / 5;
    --photo-radius: 58% 42% 50% 50% / 46% 52% 48% 54%;
    --photo-shadow: 14px -10px 0 0 var(--wave-back), -12px 12px 0 0 var(--wave-mid);
    --divider-rule-display: none;
    --button-radius: 999px;
    --button-spacing: .16em;
    --monogram-radius: var(--pebble);
    --seal-radius: var(--pebble);
    --seal-fill: var(--inv-primary);
    --seal-color: var(--inv-on-primary);
    --env-radius: 22px;
}

.inv--unduire.inv--preview {
    --wave-height: min(23%, 150px);
}

/* Six wave layers, wider than the invitation so that they can drift: three hang from the top, three rise from below. */
.inv--unduire .inv-hero::before,
.inv--unduire .inv-hero::after,
.inv--unduire .inv-hero__corner {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 56cqi);
    right: auto;
    width: 112cqi;
    max-width: none;
    height: var(--wave-height);
    aspect-ratio: auto;
    opacity: 1;
    transform: none;
    pointer-events: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.inv--unduire .inv-hero::before,
.inv--unduire .inv-hero::after {
    z-index: -1;
    background: var(--wave-back);
}

.inv--unduire .inv-hero::before {
    top: 0;
    -webkit-mask: url(../../img/invitations/ornaments/modern-wave-top-a.svg) 0 0 / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/modern-wave-top-a.svg) 0 0 / 100% 100% no-repeat;
}

.inv--unduire .inv-hero::after {
    bottom: 0;
    -webkit-mask: url(../../img/invitations/ornaments/modern-wave-bottom-a.svg) 0 0 / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/modern-wave-bottom-a.svg) 0 0 / 100% 100% no-repeat;
}

.inv--unduire .inv-hero__corner--tl,
.inv--unduire .inv-hero__corner--tr {
    top: 0;
    bottom: auto;
}

.inv--unduire .inv-hero__corner--bl,
.inv--unduire .inv-hero__corner--br {
    top: auto;
    bottom: 0;
}

.inv--unduire .inv-hero__corner--tl {
    --hero-corner-image: url(../../img/invitations/ornaments/modern-wave-top-b.svg);
    --hero-corner-fill: var(--wave-mid);
    animation: modern-wave-drift 18s ease-in-out infinite alternate;
}

.inv--unduire .inv-hero__corner--tr {
    --hero-corner-image: url(../../img/invitations/ornaments/modern-wave-top-c.svg);
    --hero-corner-fill: var(--wave-front);
}

.inv--unduire .inv-hero__corner--bl {
    --hero-corner-image: url(../../img/invitations/ornaments/modern-wave-bottom-b.svg);
    --hero-corner-fill: var(--wave-mid);
    animation: modern-wave-drift 18s ease-in-out infinite alternate-reverse;
}

.inv--unduire .inv-hero__corner--br {
    --hero-corner-image: url(../../img/invitations/ornaments/modern-wave-bottom-c.svg);
    --hero-corner-fill: var(--wave-front);
}

/* Two thin contour lines flow over each group of waves. */
.inv--unduire .inv-hero__frame {
    display: block;
    inset: 0 auto 0 calc(50% - 56cqi);
    z-index: 1;
    width: 112cqi;
    border: 0;
    background: var(--inv-primary);
    opacity: .5;
    -webkit-mask:
        url(../../img/invitations/ornaments/modern-wave-lines-top.svg) 0 0 / 100% var(--wave-height) no-repeat,
        url(../../img/invitations/ornaments/modern-wave-lines-bottom.svg) 0 100% / 100% var(--wave-height) no-repeat;
    mask:
        url(../../img/invitations/ornaments/modern-wave-lines-top.svg) 0 0 / 100% var(--wave-height) no-repeat,
        url(../../img/invitations/ornaments/modern-wave-lines-bottom.svg) 0 100% / 100% var(--wave-height) no-repeat;
}

.inv--unduire .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-wave-mark.svg);
    --orn-ratio: 64 / 36;
    --orn-width: 46px;
    --orn-fill: var(--inv-ornament);
}

/* One name alone (baptism, birthday) is set larger. */
.inv--unduire .inv-hero__name:only-child {
    font-size: 1.14em;
}

.inv--unduire .inv-hero__kicker {
    margin: 16px 0 16px;
}

/* A single flowing line: under the names, under the titles, between the sections. */
.inv--unduire .orn--hero-divider,
.inv--unduire .orn--heading,
.inv--unduire .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/modern-wave-line.svg);
    --orn-ratio: 300 / 26;
    --orn-fill: var(--inv-ornament);
}

.inv--unduire .orn--hero-divider {
    --orn-width: min(42cqi, 190px);
    --orn-margin: 20px auto 0;
}

.inv--unduire .orn--heading {
    --orn-width: 96px;
    --orn-margin: -12px auto 22px;
}

.inv--unduire .orn--divider {
    --orn-width: 72%;
    --orn-max: 260px;
}

.inv--unduire .inv-hero__date {
    margin: 16px 0 6px;
}

.inv--unduire .inv-hero__place {
    font-size: .7rem;
    letter-spacing: .26em;
}

.inv--unduire .inv-hero__scroll {
    border-radius: 50%;
    background: var(--inv-surface);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45);
}

.inv--unduire .inv-hero__scroll span {
    width: 9px;
    height: 9px;
    margin-top: -4px;
}

/* The wavy top edge of the card. */
.inv--unduire .orn--card-top {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    width: auto;
    max-width: none;
    height: 38px;
    aspect-ratio: auto;
    margin: 0;
    background: var(--inv-surface);
    -webkit-mask: url(../../img/invitations/ornaments/modern-wave-edge.svg) 0 0 / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/modern-wave-edge.svg) 0 0 / 100% 100% no-repeat;
}

.inv--unduire .inv-photo {
    padding-block: 36px;
}

.inv--unduire .inv-family__item {
    padding: 18px 16px;
}

.inv--unduire .inv-countdown {
    gap: 8px;
}

/* Countdown on four pebbles, each a little different. */
.inv--unduire .inv-countdown > div {
    padding: 20px 2px 16px;
    border-radius: 48% 52% 50% 50% / 56% 52% 48% 44%;
}

.inv--unduire .inv-countdown > div:nth-child(2) {
    border-radius: 52% 48% 46% 54% / 48% 56% 44% 52%;
}

.inv--unduire .inv-countdown > div:nth-child(3) {
    border-radius: 50% 50% 54% 46% / 52% 46% 54% 48%;
}

.inv--unduire .inv-countdown > div:nth-child(4) {
    border-radius: 46% 54% 48% 52% / 50% 54% 46% 50%;
}

.inv--unduire .inv-countdown span {
    font-size: 2rem;
}

.inv--unduire .inv-countdown small {
    margin-top: 4px;
    font-size: .56rem;
    letter-spacing: .1em;
}

.inv--unduire .inv-program__item {
    padding: 36px 20px 26px;
    border-radius: 34px;
}

.inv--unduire .inv-program__index {
    border: 0;
    border-radius: var(--pebble);
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    font-weight: 700;
}

.inv--unduire .inv-program__venue,
.inv--unduire .inv-dress__text {
    font-size: 1.18rem;
}

.inv--unduire .inv-closing__line {
    font-size: 1.25rem;
}

.inv--unduire .inv-monogram {
    width: 74px;
    height: 74px;
    border: 0;
    background: var(--soft);
    box-shadow: 7px -5px 0 0 var(--wave-back), -6px 6px 0 0 var(--wave-mid);
    font-style: italic;
    font-size: 1.15rem;
}

.inv--unduire .inv-envelope__seal {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
    font-family: "Fraunces", Georgia, serif;
}

.inv--unduire .rsvp-field input,
.inv--unduire .rsvp-field select {
    padding-inline: 18px;
}

.inv--unduire .rsvp-field textarea {
    border-radius: 20px;
}

@keyframes modern-wave-drift {
    from { transform: translateX(-3%); }
    to { transform: translateX(3%); }
}