@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
	--ink: #49353b;
	--muted: #856f73;
	--coral: #e87972;
	--coral-light: #f8c5bd;
	--yellow: #f5c86a;
	--paper: #fffaf4;
	--rose: #f8e7e2;
}

* { box-sizing: border-box; }

body {
	min-height: 100vh;
	margin: 0;
	padding: 42px 20px;
	color: var(--ink);
	background-color: #f7d9d2;
	background-image: radial-gradient(#ffffff8c 1.2px, transparent 1.2px), linear-gradient(135deg, #f8dcd5, #f2c8cf);
	background-size: 19px 19px, 100% 100%;
	font-family: 'DM Sans', 'Trebuchet MS', sans-serif;
}

.invitation {
	position: relative;
	width: min(100%, 700px);
	margin: 0 auto;
	padding: 56px clamp(24px, 7vw, 72px) 46px;
	overflow: hidden;
	text-align: center;
	background: var(--paper);
	border: 1px solid #ffffff;
	border-radius: 3px;
	box-shadow: 0 24px 55px #9d647033;
	isolation: isolate;
}

.invitation::after,
.invitation::before {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: 15px;
	content: '';
	background: radial-gradient(circle at 50% 0, transparent 10px, var(--rose) 11px, var(--rose) 14px, transparent 15px) 0 0 / 28px 15px repeat-x;
}

.invitation::before { top: 0; bottom: auto; transform: rotate(180deg); }
.intro, .cat-scene, .details, .rsvp { position: relative; z-index: 1; }

.info-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }

.info-trigger {
	position: absolute;
	top: -25px;
	right: 0;
	display: grid;
	width: 29px;
	height: 29px;
	place-items: center;
	color: var(--coral);
	border: 1px solid var(--coral-light);
	border-radius: 50%;
	background: var(--paper);
	font-family: Georgia, serif;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease;
}

.info-trigger:hover, .info-trigger:focus-visible { background: var(--rose); transform: rotate(10deg); }

.info-popup {
	position: fixed;
	inset: 0;
	display: grid;
	visibility: hidden;
	place-items: center;
	padding: 20px;
	opacity: 0;
	background: #49353b99;
	transition: opacity 180ms ease, visibility 180ms ease;
	z-index: 10;
}

.info-toggle:checked ~ .info-popup { visibility: visible; opacity: 1; }
.popup-backdrop { position: absolute; inset: 0; cursor: pointer; }

.popup-card {
	position: relative;
	width: min(100%, 430px);
	padding: 38px 36px 34px;
	color: var(--ink);
	text-align: center;
	background: var(--paper);
	border: 1px solid #f0d6d0;
	border-radius: 4px;
	box-shadow: 0 20px 60px #49353b40;
	transform: translateY(12px) scale(0.97);
	transition: transform 180ms ease;
}

.info-toggle:checked ~ .info-popup .popup-card { transform: translateY(0) scale(1); }
.popup-card .eyebrow { margin-bottom: 10px; }
.popup-card h2 { margin: 0 0 15px; font-family: 'Playfair Display', Georgia, serif; font-size: 1.8rem; line-height: 1.1; }
.popup-card strong { color: var(--coral); }
.popup-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.popup-card .popup-note { margin-top: 16px; font-size: 0.8rem; }
.popup-note a { color: var(--coral); font-weight: 700; }

.popup-close {
	position: absolute;
	top: 13px;
	right: 17px;
	color: var(--muted);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.popup-close:hover, .popup-close:focus-visible { color: var(--coral); }

.eyebrow {
	margin: 0 0 17px;
	color: var(--coral);
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2.8rem, 8vw, 5rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.98;
}

h1 span { color: var(--coral); font-style: italic; }
.welcome { margin: 20px 0 0; color: var(--muted); font-size: 1rem; }

.cat-scene {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 250px;
	margin: 22px auto 4px;
}

.cat { display: block; object-fit: contain; mix-blend-mode: multiply; }
.cat-shy { width: 230px; height: 230px; margin-right: -22px; }
.cat-love { width: 220px; height: 205px; margin-left: -18px; }

.sparkle { position: absolute; color: var(--yellow); font-size: 1.5rem; }
.sparkle-left { top: 36px; left: 15%; }
.sparkle-right { top: 75px; right: 13%; font-size: 1rem; }

.details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 auto;
	border-top: 1px solid #eed9d3;
	border-bottom: 1px solid #eed9d3;
}

.detail { display: flex; gap: 13px; align-items: flex-start; padding: 22px 12px; text-align: left; }
.detail + .detail { border-left: 1px solid #eed9d3; }

.detail-icon {
	display: grid;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	place-items: center;
	color: var(--coral);
	border-radius: 50%;
	background: var(--rose);
	font-size: 1.1rem;
}

.detail p { margin: 0; }
.detail-label { margin-bottom: 5px !important; color: var(--coral); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.detail-value { font-family: Georgia, serif; font-size: 1.03rem; font-weight: 700; }
.detail-note { margin-top: 4px !important; color: var(--muted); font-size: 0.82rem; }

.rsvp { padding-top: 28px; }
.rsvp p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.rsvp-message { margin-bottom: 13px !important; }

.rsvp-deadline {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 9px 15px;
	color: var(--coral) !important;
	border: 1px solid var(--coral-light);
	border-radius: 999px;
	font-size: 0.76rem !important;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.rsvp-deadline span { color: var(--coral); font-size: 1rem; }

.rsvp a {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	padding: 11px 18px;
	color: #fffaf4;
	background: var(--coral);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

.rsvp a:hover, .rsvp a:focus-visible { background: #d96263; transform: translateY(-2px); }
.rsvp a span { font-size: 1.1rem; line-height: 0.6; }

.confetti { position: absolute; width: 9px; height: 18px; background: var(--yellow); opacity: 0.8; transform: rotate(25deg); }
.confetti-one { top: 19%; left: 7%; }
.confetti-two { top: 12%; right: 8%; background: var(--coral-light); transform: rotate(-35deg); }
.confetti-three { top: 43%; right: 5%; width: 7px; height: 13px; background: #a9c8b3; transform: rotate(45deg); }

@media (max-width: 520px) {
	body { padding: 20px 11px; }
	.invitation { padding: 48px 18px 38px; }
	.info-trigger { top: -20px; right: 2px; }
	.cat-scene { height: 210px; margin-top: 20px; }
	.cat-shy { width: 185px; height: 185px; margin-right: -22px; }
	.cat-love { width: 176px; height: 168px; margin-left: -17px; }
	.details { display: block; }
	.detail {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr);
		max-width: 280px;
		margin: 0 auto;
		padding: 17px 5px;
	}
	.detail + .detail { border-top: 1px solid #eed9d3; border-left: 0; }
}