/* =========================================================
   W-ENVELOPE — "Կապույտ նամակ"
   A dusty-blue envelope sealed with ivory wax; inside, a
   letter drawn in blue ink on crumpled cream paper.
   ========================================================= */

:root {
    --paper: #f6f2ea;
    --card: #fcfaf5;
    --blue: #5a7a96;
    --blue-light: #9db2c5;
    --blue-deep: #44617b;
    --ink-blue: #3a556e; /* sketches, script */
    --ink: #253750; /* body text */
    --muted: #6e7889;
    --rule: rgba(37, 55, 80, 0.16);

    --f-script: "Vrdznagir", "ArmenianDecorativeU", cursive;
    --f-names: "ArmenianDecorativeU", "Vrdznagir", cursive;
    --f-hand: "ArmAllegro", "ArmenianDecorativeU", cursive;
    --f-text: "GHEAMariam", "Noto Serif Armenian", Georgia, serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    position: relative;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-text);
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* crumpled cream paper under everything (W120) */
body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/paper-crumpled.jpg") center top / 56.25rem auto repeat;
    opacity: 0.32;
    mix-blend-mode: multiply;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
p,
ol {
    margin: 0;
}

ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 0.125rem solid var(--blue-deep);
    outline-offset: 0.1875rem;
}

[hidden] {
    display: none !important;
}

html.is-locked,
html.is-locked body {
    overflow: hidden;
}

.eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.script-title {
    font-family: var(--f-script);
    font-weight: 400;
    font-size: clamp(2rem, 9vw, 2.875rem);
    line-height: 1.15;
    color: var(--blue-deep);
    text-align: center;
}
/* =========================================================
   COVER — the sealed envelope
   ========================================================= */

.cover {
    display: none;
}

.js .cover {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
    background: var(--paper);
    overflow: hidden;
}

.cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/paper-crumpled.jpg") center / cover no-repeat;
    opacity: 0.4;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.cover__inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cover__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted);
}

/* names as a handwritten signature in blue ink, with a pen stroke under it */
.cover__names {
    margin-top: 0.875rem;
    text-align: center;
}

.cover__sign {
    margin: 0;
    white-space: nowrap;
    font-family: var(--f-hand);
    font-size: clamp(2rem, 10vw, 3.375rem);
    line-height: 1.1;
    color: var(--blue-deep);
    transform: rotate(-4deg);
}

.cover__amp {
    color: #b8924a;
}

.cover__flourish {
    display: block;
    width: min(64vw, 18.75rem);
    height: auto;
    margin: -0.125rem auto 0;
    fill: none;
    stroke: var(--blue-deep);
    stroke-width: 1.2;
    stroke-linecap: round;
}

/* the date in the same handwriting as the names, large, d.m.Y with gold dots */
.cover__date {
    margin: clamp(1.875rem, 6vh, 3.75rem) 0 0;
    font-family: var(--f-hand);
    font-size: clamp(3.125rem, 15vw, 5rem);
    line-height: 1;
    letter-spacing: 0.01em;
    transform: rotate(-3deg);
    color: var(--blue-deep);
    white-space: nowrap;
}

.cover__date i {
    margin: 0 0.04em;
    font-style: normal;
    color: #b8924a;
}

.cover__hint {
    margin-top: 0;
    font-family: var(--f-script);
    font-size: 1.1875rem;
    color: var(--blue-deep);
    text-align: center;
    animation: hint 2.6s ease-in-out infinite;
}

.env {
    position: relative;
    width: min(88vw, 28.75rem);
    aspect-ratio: 10 / 7;
    margin: clamp(2.125rem, 7vh, 4rem) 0 clamp(1.125rem, 3vh, 1.625rem);
    perspective: 56.25rem;
}

.env__shadow {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -0.875rem;
    height: 1.375rem;
    border-radius: 50%;
    background: rgba(27, 42, 66, 0.28);
    filter: blur(0.75rem);
    z-index: -1;
}

.env__back,
.env__pocket,
.env__flap-face--out {
    background: var(--blue) url("../images/paper-milky.jpg") center / 26.25rem auto;
    background-blend-mode: multiply;
}

.env__back {
    position: absolute;
    inset: 0;
    border-radius: 0.25rem;
}

/* inside of the envelope: the same embossed blue paper, a shade darker */
.env__liner,
.env__flap-face--in {
    background: #4a6781 url("../images/paper-milky.jpg") center / 26.25rem auto;
    background-blend-mode: multiply;
}

.env__liner {
    position: absolute;
    left: 3%;
    right: 3%;
    top: 3%;
    height: 62%;
    border-radius: 0.1875rem 0.1875rem 0 0;
}

/* the letter: cotton paper with deckled edges, two tiny lily bouquets in the corners.
   The outer box carries the shadow (a drop-shadow follows the torn edge), the paper inside is masked. */
.env__letter {
    position: absolute;
    z-index: 2;
    left: 7%;
    right: 7%;
    top: 7%;
    height: 86%;
    filter: drop-shadow(0 0.125rem 0.3125rem rgba(27, 42, 66, 0.2));
}

.env__letter-paper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fdfbf6;
    text-align: center;
    container-type: inline-size;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 74' preserveAspectRatio='none'%3E%3Cpath d='M1 1.2L4 .6 7 1.4 10 .5 13 1.1 16 .7 19 1.5 22 .6 25 1.2 28 .5 31 1.3 34 .8 37 1.4 40 .6 43 1.1 46 .5 49 1.3 52 .7 55 1.5 58 .6 61 1.2 64 .5 67 1.4 70 .8 73 1.1 76 .5 79 1.3 82 .7 85 1.4 88 .6 91 1.2 94 .5 97 1.3 99 .8 99.4 4 98.8 8 99.5 12 98.9 16 99.4 20 98.7 24 99.5 28 98.9 32 99.3 36 98.8 40 99.5 44 98.9 48 99.4 52 98.7 56 99.5 60 98.9 64 99.3 68 98.8 72 99.2 73.3 96 72.6 93 73.4 90 72.7 87 73.3 84 72.5 81 73.4 78 72.8 75 73.3 72 72.6 69 73.5 66 72.7 63 73.2 60 72.5 57 73.4 54 72.8 51 73.3 48 72.6 45 73.4 42 72.7 39 73.3 36 72.5 33 73.4 30 72.8 27 73.2 24 72.6 21 73.4 18 72.7 15 73.3 12 72.5 9 73.4 6 72.8 3 73.3 .8 72.9.4 70 1.1 66 .5 62 1.2 58 .6 54 1.1 50 .4 46 1.2 42 .6 38 1.1 34 .5 30 1.2 26 .6 22 1.1 18 .4 14 1.2 10 .6 6 1 3Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 74' preserveAspectRatio='none'%3E%3Cpath d='M1 1.2L4 .6 7 1.4 10 .5 13 1.1 16 .7 19 1.5 22 .6 25 1.2 28 .5 31 1.3 34 .8 37 1.4 40 .6 43 1.1 46 .5 49 1.3 52 .7 55 1.5 58 .6 61 1.2 64 .5 67 1.4 70 .8 73 1.1 76 .5 79 1.3 82 .7 85 1.4 88 .6 91 1.2 94 .5 97 1.3 99 .8 99.4 4 98.8 8 99.5 12 98.9 16 99.4 20 98.7 24 99.5 28 98.9 32 99.3 36 98.8 40 99.5 44 98.9 48 99.4 52 98.7 56 99.5 60 98.9 64 99.3 68 98.8 72 99.2 73.3 96 72.6 93 73.4 90 72.7 87 73.3 84 72.5 81 73.4 78 72.8 75 73.3 72 72.6 69 73.5 66 72.7 63 73.2 60 72.5 57 73.4 54 72.8 51 73.3 48 72.6 45 73.4 42 72.7 39 73.3 36 72.5 33 73.4 30 72.8 27 73.2 24 72.6 21 73.4 18 72.7 15 73.3 12 72.5 9 73.4 6 72.8 3 73.3 .8 72.9.4 70 1.1 66 .5 62 1.2 58 .6 54 1.1 50 .4 46 1.2 42 .6 38 1.1 34 .5 30 1.2 26 .6 22 1.1 18 .4 14 1.2 10 .6 6 1 3Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}

.env__letter-lily {
    position: absolute;
    width: 9cqw;
    filter: drop-shadow(0 0.0625rem 0.0625rem rgba(27, 42, 66, 0.25));
    pointer-events: none;
}

.env__letter-lily--top {
    right: 7cqw;
    top: 3cqw;
    transform: rotate(24deg);
}

.env__letter-lily--bottom {
    left: 7cqw;
    bottom: 2cqw;
    width: 8cqw;
    transform: scaleX(-1) rotate(130deg);
}

.env__letter-kicker {
    font-family: var(--f-script);
    font-size: 5.4cqw;
    line-height: 1.2;
    color: var(--blue-deep);
}

.env__letter-names {
    margin-top: 1cqw;
    white-space: nowrap;
    font-family: var(--f-hand);
    font-size: 10.5cqw;
    line-height: 1.1;
    color: var(--blue-deep);
    transform: rotate(-4deg);
}

.env__letter-names span {
    color: #b8924a;
}

.env__letter-stroke {
    display: block;
    width: 60cqw;
    height: auto;
    margin-top: -1cqw;
    fill: none;
    stroke: var(--blue-deep);
    stroke-width: 1.1;
    stroke-linecap: round;
}

.env__letter-date {
    margin-top: 4cqw;
    font-size: 4.6cqw;
    line-height: 1.3;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
}

.env__pocket {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-color: #6584a0;
    clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
    border-radius: 0 0 0.25rem 0.25rem;
}

.env__seams {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(27, 42, 66, 0.2);
    stroke-width: 0.35;
    pointer-events: none;
}

.env__flap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 57%;
    z-index: 5;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}

.env__flap-face {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.env__flap-face--out {
    background-color: #54738f;
}

/* the inner face is flipped with the flap, so its triangle is drawn point-up:
   once open, the wide edge stays on the envelope and the point faces up */
.env__flap-face--in {
    transform: rotateX(180deg);
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

.seal {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 56%;
    width: 30%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: none;
    transform: translate(-50%, -50%);
    -webkit-tap-highlight-color: transparent;
}

.seal__wax {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: breathe 2.8s ease-in-out infinite;
}

/* two tiny lily-of-the-valley bouquets, their stems tucked just under the wax;
   one rises high on the right, the other droops low on the left */
.seal__flowers {
    position: absolute;
    width: 26%;
    max-width: none;
    transform-origin: 59% 100%;
    filter: drop-shadow(0 0.0625rem 0.0938rem rgba(27, 42, 66, 0.35));
    pointer-events: none;
}

.seal__flowers--right {
    left: 65.8%;
    top: -18.4%;
    transform: rotate(30deg);
}

.seal__flowers--left {
    left: -2%;
    top: 13.2%;
    transform: scaleX(-1) rotate(130deg);
}

@keyframes breathe {
    50% { transform: scale(1.045); }
}

/* =========================================================
   FIRST SCREEN — the couple on a large postage stamp,
   cancelled with a Yerevan postmark
   ========================================================= */

.hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: max(2.5rem, env(safe-area-inset-top)) 1rem 0;
    text-align: center;
}

.hero__kicker {
    max-width: 18em;
    font-family: var(--f-script);
    font-size: clamp(1.1875rem, 5.4vw, 1.5rem);
    line-height: 1.3;
    color: var(--blue-deep);
}

.hero__stamp-wrap {
    position: relative;
    width: min(72vw, 20.625rem);
    margin: 1.625rem 0 2.125rem;
}

/* the drop shadow lives on the wrapper, the perforation is a mask on the paper */
.stamp {
    transform: rotate(-2.5deg);
    filter: drop-shadow(0 0.875rem 1rem rgba(27, 42, 66, 0.28)) drop-shadow(0 0.0625rem 0.0625rem rgba(27, 42, 66, 0.18));
}

.stamp__paper {
    --hole: 0.2rem;
    --step: 0.6875rem;
    padding: 0.5625rem;
    background: #fffdf8;
    -webkit-mask:
        radial-gradient(circle, transparent var(--hole), #000 calc(var(--hole) + 0.0312rem)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step),
        linear-gradient(#000 0 0) content-box;
    mask:
        radial-gradient(circle, transparent var(--hole), #000 calc(var(--hole) + 0.0312rem)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step),
        linear-gradient(#000 0 0) content-box;
}

.stamp__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.4375rem 0.4375rem 0;
    border: 0.0625rem solid var(--blue-light);
}

.stamp__photo {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 22%;
}

.stamp__strip {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4375rem 0.125rem 0.4375rem;
    font-size: 0.6875rem;
    line-height: 1.2;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--blue-deep);
}

.stamp__strip span:last-child {
    font-family: var(--f-script);
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
}

/* the postmark overlaps the stamp's lower right corner */
.postmark {
    position: absolute;
    right: -18.5%;
    bottom: 9%;
    width: 53.3%;
    overflow: visible;
    transform: rotate(-9deg);
    fill: none;
    stroke: var(--ink-blue);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.78;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.postmark text {
    fill: var(--ink-blue);
    stroke: none;
    font-family: var(--f-text);
}

.postmark__arc {
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
}

.postmark__date {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.postmark__waves path {
    stroke-width: 1.8;
}

/* a handwritten line, as if written on the postcard, then the airmail ribbon and a drawn arrow */
.hero__note {
    max-width: 17em;
    font-family: var(--f-hand);
    font-size: clamp(1.375rem, 6.4vw, 1.875rem);
    line-height: 1.35;
    color: var(--blue-deep);
    text-wrap: balance;
    transform: rotate(-2deg);
}

/* the airmail ribbon, its ends fading out so no stripe is cut */
.hero__airmail {
    display: block;
    width: 9rem;
    height: 0.375rem;
    margin: 1.875rem auto 0;
    background: repeating-linear-gradient(-45deg, var(--blue) 0 0.4375rem, transparent 0.4375rem 0.75rem, #c9a45c 0.75rem 1.1875rem, transparent 1.1875rem 1.5rem) center / 9rem 0.375rem;
    opacity: 0.85;
    -webkit-mask: linear-gradient(90deg, transparent, #000 0.875rem, #000 calc(100% - 0.875rem), transparent);
    mask: linear-gradient(90deg, transparent, #000 0.875rem, #000 calc(100% - 0.875rem), transparent);
}

.hero__scroll {
    display: block;
    width: 2.75rem;
    margin-top: 1.5rem;
    padding: 0.375rem 0.5625rem;
    color: var(--blue-deep);
    -webkit-tap-highlight-color: transparent;
}

.hero__scroll svg {
    display: block;
    width: 1.625rem;
    height: 3.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
    animation: arrowDrift 2.4s ease-in-out infinite;
}

@keyframes arrowDrift {
    50% { transform: translateY(0.5rem); }
}

@keyframes hint {
    50% { opacity: 0.45; }
}

/* wax seal images (gold by default) + engraved monogram */
.seal__wax {
    container-type: inline-size;
    aspect-ratio: 1;
}

.seal__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0.25rem 0.3125rem rgba(27, 42, 66, 0.35));
}

.seal__mono {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-top: 4%;
    font-family: var(--f-names);
    font-size: 24cqw;
    line-height: 1;
    color: #9a7535;
    text-shadow: 0 0.0625rem 0 rgba(255, 236, 190, 0.75), 0 -0.0625rem 0 rgba(92, 62, 22, 0.35);
}

/* =========================================================
   LETTER PAGE (after opening)
   ========================================================= */

.letter-page {
    position: relative;
    z-index: 1;
}

.letter-page > section {
    max-width: 35rem;
    margin: 0 auto;
    padding: clamp(3.5rem, 12vw, 6rem) max(1.375rem, env(safe-area-inset-left, 0)) clamp(3rem, 10vw, 5rem);
    text-align: center;
}
/* ---- 2 · invitation ---- */
/* the photo, mounted on the letter's deckled cotton paper with two tiny lily bouquets */
.invite__photo {
    position: relative;
    width: min(72%, 20rem);
    margin: 0 auto 1.875rem;
    padding: 0.875rem;
    filter: drop-shadow(0 0.875rem 1rem rgba(27, 42, 66, 0.22));
}

.invite__paper {
    position: absolute;
    inset: 0;
    background: #fdfbf6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 1.2L5 .5 9 1.3 13 .6 17 1.4 21 .5 25 1.2 29 .7 33 1.4 37 .5 41 1.2 45 .6 49 1.4 53 .5 57 1.3 61 .7 65 1.4 69 .5 73 1.2 77 .7 81 1.4 85 .5 89 1.3 93 .6 97 1.2 99 .8 99.5 5 98.8 9 99.4 13 98.9 17 99.5 21 98.7 25 99.4 29 98.9 33 99.5 37 98.8 41 99.4 45 98.7 49 99.5 53 98.9 57 99.3 61 98.8 65 99.5 69 98.9 73 99.4 77 98.7 81 99.5 85 98.9 89 99.3 93 98.8 97 99.2 99.3 95 98.6 91 99.4 87 98.7 83 99.3 79 98.5 75 99.4 71 98.8 67 99.3 63 98.6 59 99.5 55 98.7 51 99.2 47 98.5 43 99.4 39 98.8 35 99.3 31 98.6 27 99.4 23 98.7 19 99.3 15 98.5 11 99.4 7 98.8 3 99.3 .8 98.9.4 95 1.1 91 .5 87 1.2 83 .6 79 1.1 75 .4 71 1.2 67 .6 63 1.1 59 .5 55 1.2 51 .6 47 1.1 43 .4 39 1.2 35 .6 31 1.1 27 .5 23 1.2 19 .6 15 1.1 11 .4 7 1.2 3Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 1.2L5 .5 9 1.3 13 .6 17 1.4 21 .5 25 1.2 29 .7 33 1.4 37 .5 41 1.2 45 .6 49 1.4 53 .5 57 1.3 61 .7 65 1.4 69 .5 73 1.2 77 .7 81 1.4 85 .5 89 1.3 93 .6 97 1.2 99 .8 99.5 5 98.8 9 99.4 13 98.9 17 99.5 21 98.7 25 99.4 29 98.9 33 99.5 37 98.8 41 99.4 45 98.7 49 99.5 53 98.9 57 99.3 61 98.8 65 99.5 69 98.9 73 99.4 77 98.7 81 99.5 85 98.9 89 99.3 93 98.8 97 99.2 99.3 95 98.6 91 99.4 87 98.7 83 99.3 79 98.5 75 99.4 71 98.8 67 99.3 63 98.6 59 99.5 55 98.7 51 99.2 47 98.5 43 99.4 39 98.8 35 99.3 31 98.6 27 99.4 23 98.7 19 99.3 15 98.5 11 99.4 7 98.8 3 99.3 .8 98.9.4 95 1.1 91 .5 87 1.2 83 .6 79 1.1 75 .4 71 1.2 67 .6 63 1.1 59 .5 55 1.2 51 .6 47 1.1 43 .4 39 1.2 35 .6 31 1.1 27 .5 23 1.2 19 .6 15 1.1 11 .4 7 1.2 3Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}

.invite__pic {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.invite__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.invite__lily {
    position: absolute;
    z-index: 1;
    width: 2.125rem;
    filter: drop-shadow(0 0.0625rem 0.0625rem rgba(27, 42, 66, 0.25));
    pointer-events: none;
}

.invite__lily--top {
    right: -0.5rem;
    top: -1.625rem;
    transform: rotate(28deg);
}

.invite__lily--bottom {
    left: -1rem;
    bottom: -0.375rem;
    width: 1.875rem;
    transform: scaleX(-1) rotate(125deg);
}

.invite__text {
    margin-top: 1.125rem;
}

/* signed in the heading script: "With love," then the names */
.invite__sign {
    margin-top: 1.625rem;
}

.invite__sign-with {
    font-family: var(--f-script);
    font-size: clamp(2rem, 9vw, 2.875rem);
    line-height: 1.15;
    color: var(--blue-deep);
}

.invite__sign-names {
    margin-top: 0.25rem;
    white-space: nowrap;
    font-family: var(--f-script);
    font-size: clamp(2rem, 9vw, 2.875rem);
    line-height: 1.15;
    color: var(--blue-deep);
}

/* ---- 3 · date ---- */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 0.25rem;
    max-width: 23.75rem;
    margin: 1.5rem auto 0;
    font-size: 1rem;
}

.calendar__head {
    padding-bottom: 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.calendar__day {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    height: 2.5rem;
    color: var(--ink);
}

.calendar__day--selected {
    color: #fff;
    font-weight: 700;
}

/* the chosen day sits inside a small blue heart */
.calendar__heart {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.625rem;
    height: 2.4375rem;
    transform: translate(-50%, -48%);
    fill: var(--blue);
    z-index: -1;
}

.calendar__day--selected span {
    position: relative;
}

.countdown__label {
    margin-top: 3.25rem;
    font-family: var(--f-script);
    font-size: clamp(2rem, 9vw, 2.875rem);
    line-height: 1.15;
    color: var(--blue-deep);
}

.countdown {
    display: flex;
    justify-content: center;
    gap: clamp(0.625rem, 3vw, 1.125rem);
    margin: 1.375rem 0 0;
}

/* each number pressed into a small blue wax seal */
/* each number on a little postage stamp, like the big one on the first screen */
.countdown__stamp {
    width: clamp(4.125rem, 18.5vw, 5.125rem);
    aspect-ratio: 9 / 11;
    padding: 0.375rem;
    background: #fffdf8;
    filter: drop-shadow(0 0.375rem 0.4375rem rgba(27, 42, 66, 0.22));
    --hole: 0.15rem;
    --step: 0.5rem;
    -webkit-mask:
        radial-gradient(circle, transparent var(--hole), #000 calc(var(--hole) + 0.0312rem)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step),
        linear-gradient(#000 0 0) content-box;
    mask:
        radial-gradient(circle, transparent var(--hole), #000 calc(var(--hole) + 0.0312rem)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step),
        linear-gradient(#000 0 0) content-box;
}

.countdown__stamp:nth-child(odd) {
    transform: rotate(-3deg);
}

.countdown__stamp:nth-child(even) {
    transform: rotate(2deg);
}

.countdown__in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    padding-bottom: 26%;
    border: 0.0625rem solid var(--blue-light);
}

.countdown__in span {
    font-family: var(--f-hand);
    font-size: clamp(1.875rem, 9vw, 2.5rem);
    line-height: 0.9;
    color: var(--blue-deep);
}

.countdown__in small {
    font-size: 0.5625rem;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-deep);
}

/* ---- 4 · programme: each stop is a small airmail ticket ---- */
.tickets {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.75rem;
    text-align: left;
}

.stop {
    position: relative;
    display: grid;
    grid-template-columns: 5.75rem 1fr;
    background: #fdfbf6;
    border-radius: 0.25rem;
    box-shadow: 0 0.625rem 1rem -0.75rem rgba(27, 42, 66, 0.45), 0 0.0625rem 0.125rem rgba(27, 42, 66, 0.1);
    overflow: hidden;
}

/* the airmail stripe along the top */
.stop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.3125rem;
    background: repeating-linear-gradient(-45deg, var(--blue) 0 0.4375rem, transparent 0.4375rem 0.75rem, #c9a45c 0.75rem 1.1875rem, transparent 1.1875rem 1.5rem);
    opacity: 0.9;
}

/* the tear-off stub with the time */
.stop__time {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.27em 0 0.73em; /* the script digits sit low in their line box; this centres the ink */
    border-right: 0.0875rem dashed var(--blue-light);
    font-family: var(--f-hand);
    font-size: clamp(1.75rem, 8vw, 2.125rem);
    line-height: 1;
    color: var(--blue-deep);
}

/* notches where the stub tears off */
.stop__time::before,
.stop__time::after {
    content: "";
    position: absolute;
    right: -0.5rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--paper);
}

.stop__time::before {
    top: -0.4375rem;
}

.stop__time::after {
    bottom: -0.4375rem;
}

.stop__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.125rem 1rem 0.875rem;
}

.stop__name {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.stop__place {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--muted);
}

.stop__map {
    display: inline-block;
    padding: 0 0 0.125rem;
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue-deep);
    text-decoration: none;
    border-bottom: 0.0625rem solid var(--blue-light);
}

/* ---- 5 · reply card: cotton paper, hand-drawn ticks, the gold seal sends it ---- */
.reply__title {
    font-family: var(--f-text);
    font-size: clamp(1.75rem, 8vw, 2.375rem);
    letter-spacing: 0.32em;
    margin-right: -0.32em;
}

.reply__lead {
    max-width: 22em;
    margin: 0.625rem auto 0;
    font-size: 1rem;
}

.rcard {
    position: relative;
    margin: 2.125rem 0 4rem;
    padding: 1.75rem 1.5rem 4.375rem;
    text-align: left;
    filter: drop-shadow(0 1rem 1.125rem rgba(27, 42, 66, 0.2));
}

.rcard__paper {
    position: absolute;
    inset: 0;
    background: #fdfbf6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 1.2L5 .5 9 1.3 13 .6 17 1.4 21 .5 25 1.2 29 .7 33 1.4 37 .5 41 1.2 45 .6 49 1.4 53 .5 57 1.3 61 .7 65 1.4 69 .5 73 1.2 77 .7 81 1.4 85 .5 89 1.3 93 .6 97 1.2 99 .8 99.5 5 98.8 9 99.4 13 98.9 17 99.5 21 98.7 25 99.4 29 98.9 33 99.5 37 98.8 41 99.4 45 98.7 49 99.5 53 98.9 57 99.3 61 98.8 65 99.5 69 98.9 73 99.4 77 98.7 81 99.5 85 98.9 89 99.3 93 98.8 97 99.2 99.3 95 98.6 91 99.4 87 98.7 83 99.3 79 98.5 75 99.4 71 98.8 67 99.3 63 98.6 59 99.5 55 98.7 51 99.2 47 98.5 43 99.4 39 98.8 35 99.3 31 98.6 27 99.4 23 98.7 19 99.3 15 98.5 11 99.4 7 98.8 3 99.3 .8 98.9.4 95 1.1 91 .5 87 1.2 83 .6 79 1.1 75 .4 71 1.2 67 .6 63 1.1 59 .5 55 1.2 51 .6 47 1.1 43 .4 39 1.2 35 .6 31 1.1 27 .5 23 1.2 19 .6 15 1.1 11 .4 7 1.2 3Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 1.2L5 .5 9 1.3 13 .6 17 1.4 21 .5 25 1.2 29 .7 33 1.4 37 .5 41 1.2 45 .6 49 1.4 53 .5 57 1.3 61 .7 65 1.4 69 .5 73 1.2 77 .7 81 1.4 85 .5 89 1.3 93 .6 97 1.2 99 .8 99.5 5 98.8 9 99.4 13 98.9 17 99.5 21 98.7 25 99.4 29 98.9 33 99.5 37 98.8 41 99.4 45 98.7 49 99.5 53 98.9 57 99.3 61 98.8 65 99.5 69 98.9 73 99.4 77 98.7 81 99.5 85 98.9 89 99.3 93 98.8 97 99.2 99.3 95 98.6 91 99.4 87 98.7 83 99.3 79 98.5 75 99.4 71 98.8 67 99.3 63 98.6 59 99.5 55 98.7 51 99.2 47 98.5 43 99.4 39 98.8 35 99.3 31 98.6 27 99.4 23 98.7 19 99.3 15 98.5 11 99.4 7 98.8 3 99.3 .8 98.9.4 95 1.1 91 .5 87 1.2 83 .6 79 1.1 75 .4 71 1.2 67 .6 63 1.1 59 .5 55 1.2 51 .6 47 1.1 43 .4 39 1.2 35 .6 31 1.1 27 .5 23 1.2 19 .6 15 1.1 11 .4 7 1.2 3Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}

.rcard__lily {
    position: absolute;
    right: 0.625rem;
    top: -1.375rem;
    width: 2.125rem;
    transform: rotate(26deg);
    filter: drop-shadow(0 0.0625rem 0.0625rem rgba(27, 42, 66, 0.25));
    pointer-events: none;
}

.rcard > fieldset,
.rcard > .rfield,
.rcard > .rcard__status {
    position: relative;
}

.rcap {
    display: block;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

.rchoice {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.rchoice--inline .rcheck {
    display: inline-flex;
    margin-right: 1.375rem;
}

/* a square drawn in ink; the tick is drawn in when chosen */
.rcheck {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.5rem;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rcheck input {
    position: absolute;
    opacity: 0;
    width: 0.0625rem;
    height: 0.0625rem;
}

.rcheck__box {
    position: relative;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.0875rem solid var(--blue-deep);
    border-radius: 0.125rem 0.1875rem 0.125rem 0.25rem;
}

.rcheck__box svg {
    position: absolute;
    left: -0.125rem;
    top: -0.5625rem;
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: var(--blue-deep);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    transition: stroke-dashoffset 0.35s ease-out;
}

.rcheck input:checked + .rcheck__box svg {
    stroke-dashoffset: 0;
}

.rcheck input:focus-visible + .rcheck__box {
    outline: 0.125rem solid var(--blue-light);
    outline-offset: 0.1875rem;
}

.rfield {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.rfield.is-hidden {
    display: none;
}

.rfield > input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.25rem 0;
    border: 0;
    border-bottom: 0.0625rem solid var(--blue-light);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--f-text);
    font-size: 1.125rem;
}

.rfield > input:focus {
    outline: none;
    border-bottom-color: var(--blue-deep);
}

.rfield.is-invalid > input {
    border-bottom: 0.125rem solid #b5525e;
}

/* guest count: − value + (never below 1); the number in the plain serif so it sits centred */
.stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
}

.stepper__btn {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    border: 0.0625rem solid var(--blue-light);
    border-radius: 50%;
    background: transparent;
    color: var(--blue-deep);
    font-family: var(--f-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.stepper__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.stepper input {
    width: 2.75rem;
    height: 2.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--blue-deep);
    font-family: var(--f-text);
    font-size: 1.375rem;
    line-height: 2.375rem;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper input:focus {
    outline: none;
}

.rcard__status {
    min-height: 1.4em;
    margin: 0;
    font-size: 0.9375rem;
    text-align: center;
}

.rcard__status.is-error {
    color: #a3424f;
}

.rcard__status.is-success {
    font-family: var(--f-script);
    font-size: 1.375rem;
    color: var(--blue-deep);
}

/* the gold seal sits on the card's bottom edge: the edge runs through its middle */
.rcard__submit {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 6.75rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: none;
    transform: translate(-50%, 50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s;
}

.rcard__submit:active {
    transform: translate(-50%, 50%) scale(0.94);
}

.rcard__submit img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0.25rem 0.375rem rgba(27, 42, 66, 0.35));
}

.rcard__submit span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-bottom: 7%;
    font-family: var(--f-script);
    font-size: 1.25rem;
    color: #7a5822;
    text-shadow: 0 0.0625rem 0 rgba(255, 236, 190, 0.75), 0 -0.0625rem 0 rgba(92, 62, 22, 0.3);
}

.rcard__submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* ---- closing ---- */
.closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
}

.closing__note {
    max-width: 22em;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
}

/* =========================================================
   MUSIC + FOOTER
   ========================================================= */

.music {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0));
    bottom: calc(env(safe-area-inset-bottom, 0) + 1rem);
    z-index: 80;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #9db2c5 0%, #5a7a96 50%, #46637e 100%);
    color: #fff;
    box-shadow: inset 0 0 0 0.1875rem rgba(255, 255, 255, 0.16), 0 0.5rem 1.125rem -0.5rem rgba(27, 42, 66, 0.6);
}

.music > * {
    grid-area: 1 / 1;
}

.music__note {
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.25s, transform 0.25s;
}

.music__bars {
    display: flex;
    align-items: flex-end;
    gap: 0.1875rem;
    height: 1.125rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s, transform 0.25s;
}

.music__bars i {
    width: 0.1875rem;
    height: 100%;
    border-radius: 0.125rem;
    background: currentColor;
    transform-origin: bottom;
    transform: scaleY(0.35);
}

.music[aria-pressed="true"] .music__note {
    opacity: 0;
    transform: scale(0.6);
}

.music[aria-pressed="true"] .music__bars {
    opacity: 1;
    transform: none;
}

.music[aria-pressed="true"] .music__bars i {
    animation: soundbar 0.9s ease-in-out infinite alternate;
}

.music__bars i:nth-child(2) { animation-delay: -0.3s !important; }
.music__bars i:nth-child(3) { animation-delay: -0.6s !important; }
.music__bars i:nth-child(4) { animation-delay: -0.15s !important; }

@keyframes soundbar {
    from { transform: scaleY(0.25); }
    to { transform: scaleY(1); }
}

.footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0));
    background: var(--ink);
    color: #fff;
    font-size: 0.8125rem;
}

.footer__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.footer__row a {
    display: inline-flex;
    align-items: center;
    min-height: 1.875rem;
    text-decoration: none;
}

.footer__logo {
    height: 1.125rem;
    width: auto;
}

@media (prefers-reduced-motion: reduce) {
    .hero__scroll svg,
    .seal__wax,
    .cover__hint,
    .music[aria-pressed="true"] .music__bars i {
        animation: none;
    }
}

/* the invitation starts right where the stamp screen's arrow points */
.letter-page > .invite {
    padding-top: 1.75rem;
}

/* the programme follows the countdown without a gap */
.letter-page > .date {
    padding-bottom: 0;
}

.letter-page > .program {
    padding-top: 3.25rem;
}

/* =========================================================
   DETAILS BETWEEN THE SECTIONS
   ========================================================= */

/* a tiny lily-of-the-valley between two fine rules */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    width: min(76%, 18.75rem);
    margin: 0 auto 1.875rem;
}

.divider span {
    flex: 1;
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, var(--blue-light));
}

.divider span:last-child {
    background: linear-gradient(90deg, var(--blue-light), transparent);
}

.divider img {
    width: 1.375rem;
    transform: rotate(90deg);
    filter: drop-shadow(0 0.0625rem 0.0625rem rgba(27, 42, 66, 0.2));
}

/* three photos as a row of postage stamps, the middle one lifted */
.letter-page > .memories {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(0.625rem, 3vw, 1rem);
    padding-top: 0.625rem;
    padding-bottom: 2.875rem;
}

.pstamp {
    width: clamp(5.75rem, 27vw, 8rem);
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 0.375rem;
    background: #fffdf8;
    filter: drop-shadow(0 0.5rem 0.5625rem rgba(27, 42, 66, 0.22));
    --hole: 0.1625rem;
    --step: 0.5625rem;
    -webkit-mask:
        radial-gradient(circle, transparent var(--hole), #000 calc(var(--hole) + 0.0312rem)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step),
        linear-gradient(#000 0 0) content-box;
    mask:
        radial-gradient(circle, transparent var(--hole), #000 calc(var(--hole) + 0.0312rem)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step),
        linear-gradient(#000 0 0) content-box;
}

.pstamp:nth-child(1) { transform: rotate(-4deg); }
.pstamp:nth-child(2) { transform: translateY(-0.625rem) rotate(2deg); }
.pstamp:nth-child(3) { transform: rotate(4deg); }

.pstamp__in {
    display: block;
    height: 100%;
    overflow: hidden;
    border: 0.0625rem solid var(--blue-light);
}

.pstamp__in img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

/* venue photo on a little stamp at the end of the ticket */
.stop--photo {
    grid-template-columns: 5.75rem 1fr auto;
    align-items: center;
}

.stop--photo .stop__time {
    align-self: stretch;
}

.stop__stamp {
    width: 3.75rem;
    height: 4.625rem;
    margin-right: 0.75rem;
    padding: 0.25rem;
    background: #fffdf8;
    filter: drop-shadow(0 0.25rem 0.3125rem rgba(27, 42, 66, 0.25));
    transform: rotate(4deg);
    --hole: 0.1375rem;
    --step: 0.4375rem;
    -webkit-mask:
        radial-gradient(circle, transparent var(--hole), #000 calc(var(--hole) + 0.0312rem)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step),
        linear-gradient(#000 0 0) content-box;
    mask:
        radial-gradient(circle, transparent var(--hole), #000 calc(var(--hole) + 0.0312rem)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step),
        linear-gradient(#000 0 0) content-box;
}

.stop__stamp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.0625rem solid var(--blue-light);
}

/* dress code: the palette as tiny envelopes */
.dress__text {
    max-width: 22em;
    margin: 0.625rem auto 0;
    font-size: 1rem;
}

.dress__palette {
    display: flex;
    justify-content: center;
    gap: clamp(0.5rem, 2.6vw, 0.875rem);
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.dress__palette li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--muted);
    text-align: center;
}

/* each colour is a tiny envelope sealed with a gold dot, like the invitation's own */
.dress__env {
    position: relative;
    display: block;
    width: 3.625rem;
    height: 2.625rem;
    border-radius: 0.1875rem;
    background: var(--c);
    box-shadow: 0 0.4375rem 0.5625rem -0.3125rem rgba(27, 42, 66, 0.45), inset 0 0 0 0.0625rem rgba(37, 55, 80, 0.06);
}

/* the flap, a shade darker */
.dress__env::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 58%;
    background: rgba(0, 0, 0, 0.12);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.dress__env::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 58%;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 35% 30%, #f1d79a, #c9a45c 55%, #9a7535);
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
}

.dress__palette li:nth-child(odd) .dress__env {
    transform: rotate(-4deg);
}

.dress__palette li:nth-child(even) .dress__env {
    transform: rotate(3deg);
}

/* closing: the couple on cotton paper with two tiny lily bouquets */
.closing__photo {
    position: relative;
    width: min(76%, 20.625rem);
    margin: 0 auto 1.875rem;
    padding: 0.875rem;
    filter: drop-shadow(0 0.875rem 1rem rgba(27, 42, 66, 0.22));
}

.closing__paper {
    position: absolute;
    inset: 0;
    background: #fdfbf6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 1.2L5 .5 9 1.3 13 .6 17 1.4 21 .5 25 1.2 29 .7 33 1.4 37 .5 41 1.2 45 .6 49 1.4 53 .5 57 1.3 61 .7 65 1.4 69 .5 73 1.2 77 .7 81 1.4 85 .5 89 1.3 93 .6 97 1.2 99 .8 99.5 5 98.8 9 99.4 13 98.9 17 99.5 21 98.7 25 99.4 29 98.9 33 99.5 37 98.8 41 99.4 45 98.7 49 99.5 53 98.9 57 99.3 61 98.8 65 99.5 69 98.9 73 99.4 77 98.7 81 99.5 85 98.9 89 99.3 93 98.8 97 99.2 99.3 95 98.6 91 99.4 87 98.7 83 99.3 79 98.5 75 99.4 71 98.8 67 99.3 63 98.6 59 99.5 55 98.7 51 99.2 47 98.5 43 99.4 39 98.8 35 99.3 31 98.6 27 99.4 23 98.7 19 99.3 15 98.5 11 99.4 7 98.8 3 99.3 .8 98.9.4 95 1.1 91 .5 87 1.2 83 .6 79 1.1 75 .4 71 1.2 67 .6 63 1.1 59 .5 55 1.2 51 .6 47 1.1 43 .4 39 1.2 35 .6 31 1.1 27 .5 23 1.2 19 .6 15 1.1 11 .4 7 1.2 3Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 1.2L5 .5 9 1.3 13 .6 17 1.4 21 .5 25 1.2 29 .7 33 1.4 37 .5 41 1.2 45 .6 49 1.4 53 .5 57 1.3 61 .7 65 1.4 69 .5 73 1.2 77 .7 81 1.4 85 .5 89 1.3 93 .6 97 1.2 99 .8 99.5 5 98.8 9 99.4 13 98.9 17 99.5 21 98.7 25 99.4 29 98.9 33 99.5 37 98.8 41 99.4 45 98.7 49 99.5 53 98.9 57 99.3 61 98.8 65 99.5 69 98.9 73 99.4 77 98.7 81 99.5 85 98.9 89 99.3 93 98.8 97 99.2 99.3 95 98.6 91 99.4 87 98.7 83 99.3 79 98.5 75 99.4 71 98.8 67 99.3 63 98.6 59 99.5 55 98.7 51 99.2 47 98.5 43 99.4 39 98.8 35 99.3 31 98.6 27 99.4 23 98.7 19 99.3 15 98.5 11 99.4 7 98.8 3 99.3 .8 98.9.4 95 1.1 91 .5 87 1.2 83 .6 79 1.1 75 .4 71 1.2 67 .6 63 1.1 59 .5 55 1.2 51 .6 47 1.1 43 .4 39 1.2 35 .6 31 1.1 27 .5 23 1.2 19 .6 15 1.1 11 .4 7 1.2 3Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}

.closing__pic {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.closing__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.closing__lily {
    position: absolute;
    z-index: 1;
    width: 2.125rem;
    filter: drop-shadow(0 0.0625rem 0.0625rem rgba(27, 42, 66, 0.25));
    pointer-events: none;
}

.closing__lily--top {
    right: -0.5rem;
    top: -1.625rem;
    transform: rotate(28deg);
}

.closing__lily--bottom {
    left: -1rem;
    bottom: -0.375rem;
    width: 1.875rem;
    transform: scaleX(-1) rotate(125deg);
}

/* section rhythm once the details are in */
.letter-page > .date {
    padding-top: 0;
}

.letter-page > .dress {
    padding-top: 3.25rem;
    padding-bottom: 0;
}

.letter-page > .reply {
    padding-top: 3.25rem;
    padding-bottom: 0;
}

.letter-page > .closing {
    padding-top: 5.25rem;
    padding-bottom: 2.75rem;
}

/* =========================================================
   LANGUAGE SWITCHER (Invito standard — rendered by
   layouts/header.php only when $langs has more than one entry)
   ========================================================= */

.languages-list {
    display: flex;
    position: fixed;
    top: 3rem;
    right: 3rem;
    z-index: 9999;
    padding: 0.5rem;
}

.languages-list a {
    text-decoration: none;
}

.languages-list .lang-item .lang-img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    box-shadow: 0 0 0.875rem #838383;
    border-radius: 50%;
}