:root {
	color-scheme: light;
	--forest: #35423c;
	--forest-soft: #758078;
	--paper: #fffefa;
	--rose: #a66d69;
	--gold: #b89a65;
	--ink: #343a35;
}

* { box-sizing: border-box; }

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	padding: 28px 18px;
	color: var(--ink);
	background-color: #f3f2ed;
	background-image:
		radial-gradient(ellipse at 12% 18%, rgb(184 147 91 / 10%), transparent 32%),
		radial-gradient(ellipse at 88% 82%, rgb(164 91 89 / 8%), transparent 35%),
		repeating-linear-gradient(45deg, transparent 0 23px, rgb(74 82 75 / 2%) 24px 25px);
	font-family: "Manrope", sans-serif;
}

.invitation {
	width: min(100%, 760px);
	padding: 10px;
	background: var(--gold);
	box-shadow: 0 18px 60px rgb(41 48 43 / 14%);
	animation: arrive 2200ms cubic-bezier(.16, 1, .3, 1) both;
}

.invitation__frame {
	position: relative;
	min-height: 0;
	overflow: hidden;
	padding: clamp(16px, 2vw, 24px);
	border: 1px solid rgb(177 144 86 / 70%);
	outline: 1px solid rgb(177 144 86 / 45%);
	outline-offset: -8px;
	text-align: center;
	background-color: var(--paper);
	background-image:
		radial-gradient(circle at 1px 1px, rgb(177 144 86 / 10%) 1px, transparent 1.6px),
		repeating-linear-gradient(45deg, transparent 0 9px, rgb(177 144 86 / 4%) 9px 10px, transparent 10px 20px),
		repeating-linear-gradient(-45deg, transparent 0 9px, rgb(164 91 89 / 3%) 9px 10px, transparent 10px 20px),
		radial-gradient(circle, transparent 0 5px, rgb(177 144 86 / 6%) 5.5px 6px, transparent 6.5px),
		radial-gradient(ellipse at 50% 0%, rgb(164 91 89 / 5%), transparent 58%);
	background-size: 15px 15px, 31px 31px, 31px 31px, 31px 31px, auto;
}

.invitation__frame::before,
.invitation__frame::after {
	position: absolute;
	z-index: 0;
	width: 140px;
	height: 140px;
	content: "";
	opacity: .43;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 0%, transparent 36%, var(--gold) 37% 38%, transparent 39%),
		radial-gradient(ellipse at 0% 50%, transparent 36%, var(--gold) 37% 38%, transparent 39%),
		radial-gradient(ellipse at 100% 50%, transparent 36%, var(--gold) 37% 38%, transparent 39%),
		radial-gradient(ellipse at 50% 100%, transparent 36%, var(--gold) 37% 38%, transparent 39%);
}

.invitation__frame::before { top: 16px; left: 16px; transform: rotate(-45deg); }
.invitation__frame::after { right: 16px; bottom: 16px; transform: rotate(135deg); }

.frame-ornament {
	position: absolute;
	z-index: 3;
	color: var(--gold);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 52px;
	line-height: 1;
	opacity: .68;
	pointer-events: none;
	animation: ornament-drift 30s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
.frame-ornament--top-left { top: 20px; left: 25px; transform: rotate(-35deg) scaleX(-1); }
.frame-ornament--top-right { top: 20px; right: 25px; transform: rotate(35deg); }
.frame-ornament--bottom-left { bottom: 20px; left: 25px; transform: rotate(215deg); }
.frame-ornament--bottom-right { right: 25px; bottom: 20px; transform: rotate(145deg) scaleX(-1); }

[hidden] { display: none !important; }

.cover {
	position: relative;
	z-index: 1;
	min-height: min(720px, calc(100svh - 150px));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 38px 28px;
	background-color: transparent;
	background-image:
		radial-gradient(circle at 1px 1px, rgb(177 144 86 / 10%) 1px, transparent 1.6px),
		repeating-linear-gradient(45deg, transparent 0 9px, rgb(177 144 86 / 4%) 9px 10px, transparent 10px 20px),
		repeating-linear-gradient(-45deg, transparent 0 9px, rgb(164 91 89 / 3%) 9px 10px, transparent 10px 20px),
		radial-gradient(circle, transparent 0 5px, rgb(177 144 86 / 6%) 5.5px 6px, transparent 6.5px),
		radial-gradient(ellipse at 50% 0%, rgb(164 91 89 / 5%), transparent 58%);
	background-size: 15px 15px, 31px 31px, 31px 31px, 31px 31px, auto;
}

.cover > * {
	position: relative;
	z-index: 1;
	animation: pop-in 1800ms cubic-bezier(.16, 1, .3, 1) both;
}

.cover::before {
	position: absolute;
	inset: 13px;
	content: "";
	border: 1px solid rgb(177 144 86 / 42%);
	box-shadow: inset 0 0 0 5px rgb(177 144 86 / 5%), inset 0 0 0 6px rgb(177 144 86 / 18%);
	background-image:
		radial-gradient(circle, rgb(177 144 86 / 58%) 1px, transparent 1.6px),
		radial-gradient(circle, rgb(177 144 86 / 58%) 1px, transparent 1.6px),
		radial-gradient(circle, rgb(177 144 86 / 58%) 1px, transparent 1.6px),
		radial-gradient(circle, rgb(177 144 86 / 58%) 1px, transparent 1.6px);
	background-position: top, bottom, left, right;
	background-size: 9px 9px, 9px 9px, 9px 9px, 9px 9px;
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	pointer-events: none;
	animation: border-breathe 36s ease-in-out infinite alternate;
}

.cover > :nth-child(1) { animation-delay: 100ms; }
.cover > :nth-child(2) { animation-delay: 260ms; }
.cover > :nth-child(3) { animation-delay: 420ms; }
.cover > :nth-child(4) { animation-delay: 580ms; }
.cover > :nth-child(5) { animation-delay: 740ms; }
.cover > :nth-child(6) { animation-delay: 900ms; }
.cover > :nth-child(7) { animation-delay: 1060ms; }
.cover > :nth-child(8) { animation-delay: 1220ms; }
.cover > :nth-child(9) { animation-delay: 1380ms; }
.cover > :is(.eyebrow, .cover__title, .cover__names, .cover__date) {
	animation-duration: 1000ms;
	animation-timing-function: cubic-bezier(.37, 0, .63, 1);
}
.cover > .music-toggle { animation: pop-in 1000ms cubic-bezier(.37, 0, .63, 1) both; }
.cover > .eyebrow { animation-delay: 0s; }
.cover > .cover__title { animation-delay: 1s; }
.cover > .cover__names { animation-delay: 2s; }
.cover > .cover__date { animation-delay: 3s; }

.cover__title {
	margin: 0;
	color: var(--forest);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(52px, 8vw, 68px);
	font-weight: 500;
	line-height: 1;
}

.cover__names {
	margin: 0 0 12px;
	color: var(--forest);
	font-family: "Great Vibes", "Cormorant Garamond", cursive;
	font-size: clamp(36px, 7vw, 46px);
	font-weight: 400;
	line-height: 1.05;
	text-shadow: 0 1px 0 rgb(184 154 101 / 28%);
}

.cover .eyebrow { margin: 16px 0 6px; }
.cover .flourish { margin: 10px 0 12px; }

.cover__date {
	margin: 0 0 18px;
	color: var(--forest-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.cover__date span { padding: 0 8px; color: var(--gold); }

.music-toggle {
	position: absolute;
	top: 22px;
	left: 50%;
	z-index: 2;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgb(177 144 86 / 70%);
	border-radius: 50%;
	color: var(--forest);
	background: rgb(255 254 250 / 90%);
	font: 500 13px "Manrope", sans-serif;
	cursor: pointer;
	transform: translateX(-50%);
	transition: color 500ms ease, background-color 500ms ease, border-color 500ms ease, transform 500ms ease;
}

.music-toggle:hover,
.music-toggle[aria-pressed="true"] { color: var(--rose); border-color: var(--rose); background: white; transform: translateX(-50%) scale(1.06); }
.music-toggle:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.music-toggle__note { color: var(--rose); line-height: 1; }
.envelope-art {
	position: relative;
	width: min(245px, 70vw);
	height: 116px;
	display: grid;
	place-items: center;
	margin: 0 0 12px;
	border: 1px solid rgb(177 144 86 / 42%);
	background-color: #f6f0e5;
	background-image:
		linear-gradient(32deg, transparent 49.5%, rgb(177 144 86 / 48%) 50%, transparent 50.5%),
		linear-gradient(-32deg, transparent 49.5%, rgb(177 144 86 / 48%) 50%, transparent 50.5%),
		repeating-linear-gradient(45deg, transparent 0 10px, rgb(177 144 86 / 5%) 11px 12px);
	box-shadow: 0 12px 26px rgb(61 53 42 / 10%);
	transform-style: preserve-3d;
	animation: pop-in 1800ms cubic-bezier(.16, 1, .3, 1) both, envelope-float 28s cubic-bezier(.37, 0, .63, 1) 900ms infinite;
}

.envelope-art::before {
	position: absolute;
	inset: -1px -1px 46%;
	z-index: 2;
	content: "";
	background: linear-gradient(145deg, #fffdf6, #e8ddca);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: 50% 0;
	transition: transform 1200ms cubic-bezier(.16, 1, .3, 1);
}

.cover.is-opening .envelope-art::before { transform: rotateX(165deg); }

.envelope-art__monogram {
	position: relative;
	z-index: 1;
	margin-top: 20px;
	color: var(--forest);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 34px;
	font-style: italic;
}
.envelope-art__monogram em { padding: 0 5px; color: var(--rose); font-size: .72em; }

.envelope-art__flower,
.envelope-art__leaf {
	position: absolute;
	z-index: 3;
	color: var(--rose);
	text-shadow: 0 1px 0 rgb(255 255 255 / 70%);
}
.envelope-art__flower--large { right: 23px; bottom: 17px; font-size: 40px; animation: flower-sway 24s ease-in-out infinite alternate; }
.envelope-art__flower--small { right: 58px; bottom: 5px; color: #e4d7be; font-size: 29px; animation: flower-sway 22s ease-in-out 500ms infinite alternate-reverse; }
.envelope-art__leaf { right: 7px; bottom: 41px; color: #738171; font-size: 37px; transform: rotate(-27deg); }

.open-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 19px;
	border: 1px solid var(--forest);
	color: var(--paper);
	background: var(--forest);
	font: 600 12px "Manrope", sans-serif;
	cursor: pointer;
	transition: color 600ms cubic-bezier(.16, 1, .3, 1), background-color 600ms cubic-bezier(.16, 1, .3, 1), transform 600ms cubic-bezier(.16, 1, .3, 1);
}

.open-button:hover, .open-button:focus-visible {
	color: var(--forest);
	background: transparent;
	transform: translateY(-2px);
}

.open-button:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.open-button span { color: var(--rose); font-size: 16px; }
.cover .ornament--bottom { position: absolute; right: 0; bottom: 28px; left: 0; }
.cover.is-opening { animation: cover-reveal 1300ms cubic-bezier(.16, 1, .3, 1) forwards; }

.invitation__content {
	width: min(100%, 550px);
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	padding: clamp(52px, 8vw, 88px) 0 50px;
	border-top: 1px solid rgb(177 144 86 / 55%);
}

.invitation__content[hidden] { display: none; }
.invitation__content:not([hidden]) { animation: content-reveal 1800ms cubic-bezier(.16, 1, .3, 1) both; }
.invitation__content:not([hidden]) > * {
	animation: pop-in 1800ms cubic-bezier(.16, 1, .3, 1) both;
}
.invitation__content:not([hidden]) > :nth-child(1) { animation-delay: 100ms; }
.invitation__content:not([hidden]) > :nth-child(2) { animation-delay: 260ms; }
.invitation__content:not([hidden]) > :nth-child(3) { animation-delay: 420ms; }
.invitation__content:not([hidden]) > :nth-child(4) { animation-delay: 580ms; }
.invitation__content:not([hidden]) > :nth-child(5) { animation-delay: 740ms; }
.invitation__content:not([hidden]) > :nth-child(6) { animation-delay: 900ms; }
.invitation__content:not([hidden]) > :nth-child(7) { animation-delay: 1060ms; }
.invitation__content:not([hidden]) > :nth-child(8) { animation-delay: 1220ms; }
.invitation__content:not([hidden]) > :nth-child(9) { animation-delay: 1380ms; }
.invitation__content:not([hidden]) > :nth-child(10) { animation-delay: 1540ms; }
.invitation__content:not([hidden]) > :nth-child(11) { animation-delay: 1700ms; }
.invitation__content:not([hidden]) > :is(.eyebrow, h1, .intro, .message, .details, .map-link, .wedding-program, .rsvp, .closing) {
	animation-duration: 1000ms;
	animation-timing-function: cubic-bezier(.37, 0, .63, 1);
}
.invitation__content:not([hidden]) > .eyebrow { animation-delay: 0s; }
.invitation__content:not([hidden]) > h1 { animation-delay: 1s; }
.invitation__content:not([hidden]) > .intro { animation-delay: 2s; }
.invitation__content:not([hidden]) > .message { animation-delay: 3s; }
.invitation__content:not([hidden]) > .details { animation-delay: 4s; }
.invitation__content:not([hidden]) > .map-link { animation-delay: 5s; }
.invitation__content:not([hidden]) > .wedding-program { animation-delay: 6s; }
.invitation__content:not([hidden]) > .rsvp { animation-delay: 7s; }
.invitation__content:not([hidden]) > .closing { animation-delay: 8s; }

.ornament, .eyebrow, h1, .flourish, .intro, .message, .details, .map-link, .closing {
	position: relative;
	z-index: 1;
}

.ornament { width: 100%; color: var(--gold); font-size: 22px; line-height: 1; }
.ornament::before, .ornament::after {
	position: absolute;
	top: 50%;
	width: min(32%, 150px);
	height: 1px;
	content: "";
	background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament::before { left: 5%; }
.ornament::after { right: 5%; transform: scaleX(-1); }

.eyebrow, .detail__label {
	color: var(--forest-soft);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .19em;
	text-transform: uppercase;
}
.eyebrow { margin: 30px 0 8px; }

h1 {
	margin: 0;
	color: var(--forest);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(48px, 10vw, 72px);
	font-weight: 500;
	line-height: 1;
}

.flourish {
	width: 180px;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 17px;
	color: var(--rose);
}
.flourish span { height: 1px; flex: 1; background: var(--gold); }
.flourish i { font-size: 25px; font-style: normal; line-height: 1; }

.intro {
	margin: 0;
	color: var(--forest);
	font-family: "Great Vibes", "Cormorant Garamond", cursive;
	font-size: clamp(43px, 9vw, 56px);
	font-weight: 400;
	line-height: 1.05;
	text-shadow: 0 1px 0 rgb(184 154 101 / 28%);
}
.and { display: inline-block; padding: 7px 0 5px; color: var(--rose); font-size: .64em; font-style: italic; }

.message {
	margin: 21px 0 27px;
	color: #53665e;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 23px;
	line-height: 1.25;
}

.message__section,
.message__copy {
	display: block;
}

.message__language {
	display: block;
	margin-bottom: 8px;
	color: var(--rose);
	font-family: "Manrope", sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.message__section--translation {
	margin-top: 17px;
	padding-top: 14px;
	border-top: 1px solid rgb(177 144 86 / 55%);
	font-size: 18px;
	line-height: 1.35;
}

.couple-gallery {
	width: min(100%, 440px);
	display: grid;
	grid-template-columns: minmax(0, 210px);
	justify-content: center;
	align-items: start;
	gap: 14px;
	margin: 12px 0 30px;
}

.couple-gallery__photo {
	margin: 0;
	padding: 5px;
	border: 1px solid rgb(177 144 86 / 60%);
	background: var(--paper);
	box-shadow: 0 10px 24px rgb(52 58 53 / 10%);
	animation: photo-reveal 1800ms cubic-bezier(.16, 1, .3, 1) both;
}

.couple-gallery__photo:nth-child(2) {
	animation-delay: 180ms;
}

.couple-gallery__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 44%;
}

.couple-gallery__photo:nth-child(2) img { object-position: center 32%; }

.couple-gallery__photo figcaption {
	padding: 8px 0 3px;
	color: var(--forest-soft);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 17px;
	font-style: italic;
	animation: pop-in 7000ms cubic-bezier(.37, 0, .63, 1) both;
}

.details {
	width: min(100%, 440px);
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 17px;
	padding: 26px 0;
	border-top: 1px solid rgb(177 144 86 / 65%);
	border-bottom: 1px solid rgb(177 144 86 / 65%);
}
.detail { display: flex; flex-direction: column; gap: 6px; }
.detail__label { font-size: 9px; letter-spacing: .12em; }
.detail__value {
	color: var(--forest);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.05;
}
.detail__city { color: var(--forest-soft); font-size: 11px; }
.detail__address {
	color: var(--forest-soft);
	font-size: 12px;
	line-height: 1.5;
}
.details__rule { width: 48px; height: 1px; background: rgb(177 144 86 / 65%); }

.map-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	padding: 11px 17px;
	border: 1px solid var(--forest);
	color: var(--forest);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: color 600ms cubic-bezier(.16, 1, .3, 1), background-color 600ms cubic-bezier(.16, 1, .3, 1), transform 600ms cubic-bezier(.16, 1, .3, 1);
}
.map-link:hover, .map-link:focus-visible { color: var(--paper); background: var(--forest); transform: translateY(-2px); }
.map-link:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.map-link__icon { color: var(--rose); font-size: 16px; }

.wedding-program {
	width: min(100%, 440px);
	margin-top: 30px;
	padding: 20px 16px 14px;
	border-top: 1px solid rgb(177 144 86 / 65%);
	border-bottom: 1px solid rgb(177 144 86 / 65%);
	background: linear-gradient(135deg, rgb(184 154 101 / 5%), transparent 48%, rgb(166 109 105 / 5%));
}

.wedding-program .eyebrow {
	margin: 0 0 7px;
	font-size: 9px;
}

.wedding-program__title {
	margin: 0 0 12px;
	color: var(--forest);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 29px;
	font-weight: 500;
}

.wedding-program__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wedding-program__item {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid rgb(177 144 86 / 25%);
	text-align: left;
}

.wedding-program__time {
	color: var(--rose);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 24px;
	font-weight: 600;
}

.wedding-program__event {
	display: grid;
	gap: 2px;
	color: var(--forest);
	font-size: 12px;
}

.wedding-program__event [lang="kk"] {
	color: var(--forest-soft);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 15px;
}

.rsvp {
	width: min(100%, 440px);
	margin-top: 22px;
	padding: 14px 12px;
	border: 1px solid rgb(177 144 86 / 45%);
	color: var(--forest);
	background: rgb(184 154 101 / 5%);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 20px;
	line-height: 1.3;
}

.rsvp__title {
	margin: 0 0 12px;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 25px;
	font-weight: 500;
}

.rsvp p { margin: 0; }
.rsvp p + p { margin-top: 6px; color: var(--forest-soft); font-size: 18px; }

.rsvp-form {
	display: grid;
	gap: 14px;
	margin-top: 18px;
	text-align: left;
}

.rsvp-form__name {
	display: grid;
	gap: 6px;
	font: 600 11px "Manrope", sans-serif;
}

.rsvp-form__name input {
	width: 100%;
	min-height: 42px;
	padding: 9px 10px;
	border: 1px solid rgb(177 144 86 / 55%);
	border-radius: 0;
	color: var(--ink);
	background: var(--paper);
	font: 14px "Manrope", sans-serif;
}

.rsvp-form__name input:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.rsvp-form__choices {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	border: 0;
}

.rsvp-form__choices legend {
	margin-bottom: 8px;
	font: 600 11px "Manrope", sans-serif;
}

.rsvp-form__choices label {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 12px "Manrope", sans-serif;
}

.rsvp-form__choices input { accent-color: var(--forest); }

.rsvp-form__submit {
	min-height: 42px;
	border: 1px solid var(--forest);
	color: var(--paper);
	background: var(--forest);
	font: 600 11px "Manrope", sans-serif;
	cursor: pointer;
}

.rsvp-form__submit:hover { color: var(--forest); background: transparent; }

.rsvp-form__status {
	color: var(--forest-soft);
	font: 11px/1.5 "Manrope", sans-serif;
}

.closing {
	margin: 0;
	padding-top: 32px;
	color: var(--rose);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	font-style: italic;
}
.closing__names {
	display: inline-block;
	margin-top: 4px;
	color: var(--forest);
	font-size: 26px;
	font-weight: 600;
}
.ornament--bottom { margin-top: 20px; }

@keyframes arrive {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes cover-reveal {
	to { opacity: 0; filter: blur(2px); transform: scale(.93) rotateX(-7deg); }
}

@keyframes content-reveal {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes photo-reveal {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes envelope-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -4px; }
}

@keyframes flower-sway {
	from { rotate: -5deg; }
	to { rotate: 5deg; }
}

@media (max-width: 480px) {
	body { padding: 14px 10px; }
	.invitation { padding: 7px; }
	.invitation__frame { padding: 12px; }
	.cover { min-height: min(620px, calc(100svh - 110px)); padding: 28px 12px 40px; }
	.invitation__frame::before, .invitation__frame::after { width: 90px; height: 90px; }
	.frame-ornament { font-size: 39px; }
	.frame-ornament--top-left, .frame-ornament--bottom-left { left: 18px; }
	.frame-ornament--top-right, .frame-ornament--bottom-right { right: 18px; }
	.eyebrow { margin-top: 25px; }
	.details { gap: 15px; }
	.detail__value { font-size: 18px; }
	.detail__label { font-size: 8px; }
	.invitation__content { padding: 50px 5px 35px; }
	.couple-gallery { gap: 9px; }
	.couple-gallery__photo { padding: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	@page { size: A5 portrait; margin: 0; }
	body { min-height: 100%; padding: 0; background: white; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
	.invitation { width: 100%; padding: 5mm; box-shadow: none; animation: none; }
	.invitation__frame { padding: 5mm; }
	.cover[hidden] { display: none; }
	.map-link { color: var(--forest); }
}