* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* ===== FONTS ===== */
	--font-script: 'Great Vibes', cursive;
	--font-serif: 'Cormorant Garamond', serif;
	--font-sans: 'Montserrat', sans-serif;

	/* ===== COLORS - Olive Green Palette ===== */
	--olive-dark: #3a4634;
	--olive-medium-dark: #616c50;
	--olive: #88936c;
	--olive-medium: #a1a08b;
	--olive-light: #b9b9a6;
	--olive-pale: #d1d2c1;

	/* ===== COLORS - Neutrals ===== */
	--cream: #f5f2eb;
	--cream-dark: #e8e3d6;
	--paper-color: #ffffff;
	--gold: #b8975c;
	--gold-light: #d4bc8a;
	--text-dark: #2c2c2c;
	--text-muted: #5a5a5a;

	/* ===== COLORS - Seal ===== */
	--seal-red: #7a2828;
	--seal-dark: #4a1515;

	/* ===== COLORS - Envelope ===== */
	--envelope-base: #d4c4a8;
	--envelope-mid: #c9b896;
	--envelope-dark: #bfad84;
}

html, body {
	min-height: 100%;
}

body {
	min-height: 100vh;
	background: linear-gradient(135deg, var(--olive-dark) 0%, var(--olive-medium-dark) 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font-serif);
	overflow-x: hidden;
}

/* ========== ENVELOPE CONTAINER ========== */
.envelope-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	background: linear-gradient(160deg, #1a1f14 0%, var(--olive-dark) 30%, #3d4a2a 60%, var(--olive-dark) 100%);
	transition: opacity 0.8s ease, visibility 0.8s ease;
	padding: 20px;
}

.envelope-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.3) 100%);
	pointer-events: none;
}

.envelope-container.opened {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ========== ENVELOPE ========== */
.envelope-wrapper {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 16 / 10;
	cursor: pointer;
	filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}

.envelope {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	perspective: 1500px;
}

.envelope-body {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, var(--envelope-base) 0%, var(--envelope-mid) 50%, var(--envelope-dark) 100%);
	border-radius: 4px;
	box-shadow: 
		inset 0 0 30px rgba(0,0,0,0.08),
		inset 0 -3px 0 rgba(0,0,0,0.05);
	overflow: hidden;
}

.envelope-body::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	opacity: 0.04;
}

.envelope-liner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, var(--olive-pale) 0%, var(--olive-light) 100%);
	/*clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%);*/
	z-index: 0;
}

.envelope-liner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 10px,
		rgba(255,255,255,0.1) 10px,
		rgba(255,255,255,0.1) 20px
	);
}

.letter-peek {
	position: absolute;
	top: 15%;
	left: 10%;
	right: 10%;
	height: 35%;
	background: var(--paper-color);
	border-radius: 2px;
	z-index: 1;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.letter-peek-text {
	font-family: var(--font-script);
	font-size: clamp(1rem, 4vw, 1.8rem);
	color: var(--olive-medium);
	text-align: center;
}

.letter-peek-names {
	font-family: var(--font-script);
	font-size: clamp(0.8rem, 3vw, 1.2rem);
	color: var(--olive-light);
	margin-top: 5px;
}

.envelope-front {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #cfc0a5 0%, var(--envelope-mid) 30%, var(--envelope-dark) 100%);
	clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
	border-radius: 0 0 4px 4px;
	z-index: 2;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}

.envelope-front::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	opacity: 0.04;
}

.envelope-flap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 75%;
	background: linear-gradient(180deg, var(--envelope-dark) 0%, var(--envelope-mid) 40%, var(--envelope-base) 100%);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: top center;
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 5;
	box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.envelope-flap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		linear-gradient(160deg, rgba(255,255,255,0.15) 0%, transparent 30%),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	background-blend-mode: overlay;
	opacity: 0.5;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.envelope-flap::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive-pale) 100%);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: rotateX(180deg);
	backface-visibility: hidden;
}

.envelope.open .envelope-flap {
	transform: rotateX(180deg);
}

/* ========== WAX SEAL ========== */
.seal-container {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	transition: all 0.6s ease;
}

.envelope.open .seal-container {
	transform: translate(-50%, -50%) scale(0) rotate(180deg);
	opacity: 0;
}

.seal {
	position: relative;
	width: clamp(70px, 15vw, 100px);
	height: clamp(70px, 15vw, 100px);
	animation: sealFloat 3s ease-in-out infinite;
}

.seal-wax {
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 35% 35%, 
		#a63030 0%, 
		var(--seal-red) 30%, 
		var(--seal-dark) 100%
	);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	box-shadow: 
		0 4px 15px rgba(0,0,0,0.4),
		0 8px 30px rgba(0,0,0,0.3),
		inset 0 -8px 20px rgba(0,0,0,0.4),
		inset 0 4px 10px rgba(255,255,255,0.1);
}

@keyframes sealFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

.seal-wax::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	background: radial-gradient(circle at 35% 35%, 
		#a63030 0%, 
		var(--seal-red) 30%, 
		var(--seal-dark) 100%
	);
	border-radius: 50%;
	z-index: -1;
	filter: blur(1px);
	clip-path: polygon(
		50% 0%, 60% 5%, 70% 2%, 80% 8%, 90% 5%, 95% 15%, 
		100% 25%, 98% 35%, 100% 45%, 97% 55%, 100% 65%, 
		95% 75%, 90% 85%, 80% 92%, 70% 88%, 60% 95%, 
		50% 100%, 40% 95%, 30% 90%, 20% 95%, 10% 88%, 
		5% 78%, 0% 65%, 3% 55%, 0% 45%, 2% 35%, 0% 25%, 
		5% 15%, 12% 8%, 22% 3%, 35% 5%
	);
}

.seal-wax::after {
	content: '';
	position: absolute;
	width: 75%;
	height: 75%;
	border: 2px solid rgba(212, 175, 55, 0.4);
	border-radius: 50%;
	box-shadow: 
		inset 0 0 10px rgba(0,0,0,0.2),
		0 0 5px rgba(212, 175, 55, 0.2);
}

.seal-initials {
	font-family: var(--font-script);
	font-size: clamp(1.5rem, 5vw, 2.2rem);
	color: var(--gold-light);
	text-shadow: 
		1px 1px 2px rgba(0,0,0,0.5),
		0 0 10px rgba(212, 175, 55, 0.3);
	letter-spacing: 2px;
	z-index: 1;
}

.seal-drip {
	position: absolute;
	background: var(--seal-red);
	border-radius: 0 0 50% 50%;
	box-shadow: inset 0 -3px 5px rgba(0,0,0,0.3);
}

.seal-drip:nth-child(1) {
	bottom: -12px;
	left: 25%;
	width: 12px;
	height: 18px;
}

.seal-drip:nth-child(2) {
	bottom: -6px;
	right: 20%;
	width: 10px;
	height: 14px;
}

.seal-drip:nth-child(3) {
	bottom: -6px;
	left: 45%;
	width: 8px;
	height: 10px;
}

.click-instruction {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-sans);
	font-size: 0.85rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	animation: pulse 2s infinite;
	white-space: nowrap;
	text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@keyframes pulse {
	0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
	50% { opacity: 1; transform: translateX(-50%) scale(1.02); }
}

.envelope-decoration {
	position: absolute;
	width: 150%;
	height: 150%;
	top: -25%;
	left: -25%;
	pointer-events: none;
	opacity: 0.1;
}

.leaf {
	position: absolute;
	font-size: 2rem;
	color: var(--olive-pale);
	animation: floatLeaf 6s ease-in-out infinite;
}

.leaf:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.leaf:nth-child(2) { top: 20%; right: 8%; animation-delay: 1s; transform: rotate(45deg); }
.leaf:nth-child(3) { bottom: 15%; left: 10%; animation-delay: 2s; transform: rotate(-30deg); }
.leaf:nth-child(4) { bottom: 25%; right: 5%; animation-delay: 3s; }

@keyframes floatLeaf {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(5deg); }
}

/* ========== INVITATION WRAPPER ========== */
.invitation-wrapper {
	min-height: 100vh;
	width: 100%;
	padding: 40px 20px;
	display: flex;
	justify-content: center;
	opacity: 0;
	transform: translateY(50px);
	transition: all 1s ease 0.5s;
}

.invitation-wrapper.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ========== INVITATION CARD ========== */
.invitation {
	background: var(--paper-color);
	max-width: 700px;
	width: 100%;
	padding: 60px 50px;
	position: relative;
	box-shadow: 
		0 0 0 1px rgba(0,0,0,0.05),
		0 25px 80px rgba(0, 0, 0, 0.3),
		0 10px 30px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.invitation::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	opacity: 0.03;
	pointer-events: none;
}

.invitation::after {
	content: '';
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border: 1px solid var(--olive-medium);
	pointer-events: none;
}

.corner-decoration {
	position: absolute;
	width: 60px;
	height: 60px;
	opacity: 0.5;
	z-index: 1;
}

.corner-decoration svg {
	width: 100%;
	height: 100%;
	fill: var(--olive-medium);
}

.corner-tl { top: 20px; left: 20px; }
.corner-tr { top: 20px; right: 20px; transform: scaleX(-1); }
.corner-bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
.corner-br { bottom: 20px; right: 20px; transform: scale(-1); }

/* ========== HEADER ========== */
.invitation-header {
	text-align: center;
	margin-bottom: 40px;
	position: relative;
}

.pre-title {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--olive-medium);
	margin-bottom: 20px;
}

.couple-names {
	font-family: var(--font-script);
	font-size: clamp(2.2rem, 8vw, 4rem);
	color: var(--olive-dark);
	line-height: 1.3;
	margin-bottom: 10px;
}

.couple-names .ampersand {
	display: block;
	font-size: 0.5em;
	color: var(--olive-light);
	margin: 5px 0;
}

.invitation-subtitle {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--text-muted);
	margin-top: 20px;
}

.goto {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--olive-light);
  margin: 5px 0;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  width: 100%;
}

.goto .chevron {
  display: block;
  font-size: 1.5em;
  margin-top: 5px;
  animation: bounce 1.2s infinite ease-in-out;
}

/* Bouncing animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ========== DIVIDER ========== */
.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 35px 0;
	gap: 15px;
}

.divider-line {
	height: 1px;
	width: 60px;
	background: linear-gradient(90deg, transparent, var(--olive-medium), transparent);
}

.divider-ornament {
	color: var(--olive-medium);
	font-size: 1.2rem;
}

/* ========== DATE SECTION ========== */
.date-section {
	text-align: center;
	margin: 40px 0;
}

.save-the-date {
	font-family: var(--font-sans);
	font-size: 0.65rem;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--olive-light);
	margin-bottom: 20px;
}

.date-display {
	font-family: var(--font-serif);
	color: var(--olive-dark);
}

.date-main {
	font-size: clamp(1.8rem, 5vw, 2.5rem);
	font-weight: 600;
	letter-spacing: 3px;
	margin-bottom: 10px;
}

.date-day {
	font-family: var(--font-script);
	font-size: clamp(1.8rem, 5vw, 2.5rem);
	display: inline-block;
	margin: 0 10px;
}

.date-time {
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--olive-medium);
	margin-top: 15px;
	letter-spacing: 4px;
}

/* Countdown */
.countdown {
	display: flex;
	justify-content: center;
	gap: clamp(10px, 3vw, 20px);
	margin: 30px 0;
	flex-wrap: nowrap;
}

.countdown-item {
	text-align: center;
}

.countdown-value {
	font-family: var(--font-sans);;
	font-size: clamp(20px, 5vw, 32px);
	color: #5c4a3a;
	display: block;
	line-height: 1;
}

.countdown-label {
	font-size: clamp(9px, 2vw, 11px);
	letter-spacing: 2px;
	color: #a08060;
	text-transform: uppercase;
}


/* ========== PHOTO SECTION WITH RINGS ========== */
.photo-section {
	margin: 40px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	position: relative;
}

.photo-frame {
	position: relative;
	padding: 8px;
	background: #fff;
	box-shadow: 
		0 4px 15px rgba(0, 0, 0, 0.15),
		0 2px 5px rgba(0, 0, 0, 0.1);
	transform: rotate(-2deg);
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.photo-frame:nth-child(2) {
	transform: rotate(2deg);
}

.photo-frame:hover {
	transform: rotate(0deg) scale(1.03);
	z-index: 2;
}

.photo-placeholder {
	width: clamp(100px, 25vw, 150px);
	height: clamp(130px, 32vw, 190px);
	background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--olive-medium);
	font-family: var(--font-sans);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	padding: 10px;
}

.photo-placeholder-icon {
	font-size: 2rem;
	margin-bottom: 8px;
	opacity: 0.6;
}

/* Rings overlay - positioned on top of photos */
.rings-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	pointer-events: none;
}

.rings-svg {
	width: clamp(60px, 15vw, 100px);
	height: clamp(50px, 12vw, 80px);
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.rings-svg .ring {
	fill: none;
	stroke: var(--gold);
	stroke-width: 3;
}

.rings-svg .ring-shine {
	fill: none;
	stroke: var(--gold-light);
	stroke-width: 1.5;
	opacity: 0.7;
}

/* Tape effect */
.tape {
	position: absolute;
	width: 60px;
	height: 20px;
	background: linear-gradient(180deg, 
		rgba(255, 255, 220, 0.8) 0%, 
		rgba(255, 255, 200, 0.6) 100%
	);
	top: -8px;
	left: 50%;
	transform: translateX(-50%) rotate(-3deg);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tape::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 3px,
		rgba(255,255,255,0.4) 3px,
		rgba(255,255,255,0.4) 6px
	);
}

.photo-frame:nth-child(2) .tape {
	transform: translateX(-50%) rotate(2deg);
}

/* ========== INFO SECTIONS ========== */
.info-section {
	margin: 45px 0;
	text-align: center;
}

.section-title {
	font-family: var(--font-script);
	font-size: 2rem;
	color: var(--olive-dark);
	margin-bottom: 20px;
}

.section-subtitle {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	color: var(--olive-dark);
	margin-bottom: 8px;
}

.section-icon {
	font-size: 1.8rem;
	margin-bottom: 12px;
}

.section-content {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	color: var(--text-dark);
	line-height: 1.8;
}

.venue-name {
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--olive-dark);
	margin-bottom: 8px;
}

.venue-address {
	font-style: italic;
	color: var(--text-muted);
}

/* ========== MAP SECTION ========== */
.map-section {
	margin: 35px 0;
	border: 1px solid var(--cream-dark);
	overflow: hidden;
}

.map-container {
	width: 100%;
	height: 250px;
	background: var(--cream);
}

.map-container iframe {
	width: 100%;
	height: 100%;
	border: none;
	filter: sepia(15%) saturate(90%);
}

.map-link {
	display: block;
	text-align: center;
	padding: 12px;
	background: var(--olive-dark);
	color: var(--cream);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.3s ease;
}

.map-link:hover {
	background: var(--olive-medium);
}

/* ========== TIMELINE ========== */
.timeline {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 35px auto; /* auto for horizontal centering when max-width is applied */
    flex-wrap: wrap;
    padding: 10px 0;
}

.timeline-item {
    text-align: center;
    padding: 15px 12px;
    min-width: 80px;
    flex-shrink: 0;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    width: 15px;
    height: 1px;
    background: var(--olive-pale);
}

/* Hide connector for items at the end of a row */
.timeline-item.row-end::after {
    display: none;
}

.timeline-time {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--olive-medium);
    margin-bottom: 8px;
}

.timeline-event {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--text-dark);
}

.timeline-icon {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

/* ========== LANDSCAPE PHOTO ========== */
.landscape-photo {
	margin: 45px -20px;
	position: relative;
}

.landscape-frame {
	background: #fff;
	padding: 12px 12px 12px 12px;
	box-shadow: 
		0 8px 30px rgba(0, 0, 0, 0.12),
		0 3px 10px rgba(0, 0, 0, 0.08);
	transform: rotate(-0.5deg);
	margin: 0 auto;
	padding-bottom: 5px;
	max-width: 50%;
}

.landscape-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--olive-medium);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.photo-caption {
	text-align: center;
	font-family: var(--font-script);
	font-size: 1.1rem;
	color: var(--text-muted);
	margin-top: 8px;
}

.landscape-frame .tape {
	width: 50px;
	height: 18px;
}

.landscape-frame .tape-tl {
	position: absolute;
	top: -5px;
	left: 10%;
	transform: rotate(-20deg);
}

.landscape-frame .tape-tr {
	position: absolute;
	top: -5px;
	right: 10%;
	transform: rotate(20deg);
}

/* ========== FAQ ========== */
.faq {
	margin: 15px 0;
	text-align: center;
}

.faq-item {
	background: linear-gradient(135deg, rgba(85, 107, 47, 0.08) 0%, rgba(85, 107, 47, 0.03) 100%);
	padding: 25px 30px;
	margin: 20px 0;
	text-align: center;
	border-left: 3px solid var(--olive-medium);
}

.faq-title {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--olive-medium);
	margin-bottom: 10px;
}

.faq-text {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	font-style: italic;
	color: var(--text-dark);
}

/* ========== ADDITIONAL INFO ========== */
.additional-info {
	margin: 40px 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

.info-card {
	text-align: center;
	padding: 20px 10px;
	border: 1px solid var(--cream-dark);
	transition: all 0.3s ease;
	cursor: pointer;
}

.info-card:hover {
	border-color: var(--olive-medium);
	background: rgba(85, 107, 47, 0.03);
}

.info-card-icon {
	font-size: 1.6rem;
	margin-bottom: 12px;
}

.info-card-title {
	font-family: var(--font-sans);
	font-size: 0.6rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--olive-medium);
	margin-bottom: 8px;
}

.info-card-text {
	font-family: var(--font-serif);
	font-size: 0.9rem;
	color: var(--text-dark);
	line-height: 1.4;
}

/* ========== RSVP SECTION ========== */
.rsvp-section {
    text-align: center;
    margin: 0 0 30px;
    padding: 35px 20px;
    background: linear-gradient(180deg, transparent, rgba(85, 107, 47, 0.03));
}

.rsvp-title {
    font-family: var(--font-script);
    font-size: 2.2rem;
    color: var(--olive-dark);
    margin-bottom: 18px;
}

.rsvp-text {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.rsvp-deadline {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--olive-medium);
    margin-bottom: 30px;
}

/* Form Styles */
.rsvp-form {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--olive-dark);
    margin-bottom: 10px;
}

.form-label-optional {
    font-weight: normal;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: lowercase;
    font-size: 0.7rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--olive-dark);
    background: #fff;
    border: 1px solid rgba(85, 107, 47, 0.2);
    transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--olive-medium);
    box-shadow: 0 0 0 3px rgba(85, 107, 47, 0.1);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Radio Buttons */
.radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(85, 107, 47, 0.3);
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.radio-option input[type="radio"]:checked + .radio-custom {
    border-color: var(--olive-medium);
}

.radio-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--olive-medium);
    border-radius: 50%;
}

.radio-label {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--olive-dark);
}

/* Allergies Section */
.allergies-group {
    background: rgba(85, 107, 47, 0.03);
    padding: 20px;
    margin-top: 10px;
}

.allergies-subtitle {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 18px;
    line-height: 1.5;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.checkbox-option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(85, 107, 47, 0.3);
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--olive-medium);
    border-color: var(--olive-medium);
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-label {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--olive-dark);
}

/* Other allergies input */
.other-allergy-wrapper {
    grid-column: 1 / -1;
    margin-top: 5px;
}

.other-allergy-input {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--olive-dark);
    background: #fff;
    border: 1px solid rgba(85, 107, 47, 0.2);
    margin-top: 8px;
    transition: all 0.3s ease;
}

.other-allergy-input:focus {
    outline: none;
    border-color: var(--olive-medium);
    box-shadow: 0 0 0 3px rgba(85, 107, 47, 0.1);
}

/* Submit Button */
.rsvp-submit {
    display: block;
    width: 100%;
    padding: 16px 35px;
    background: var(--olive-medium-dark);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 30px;
}

.rsvp-submit:hover {
    background: var(--olive-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(45, 58, 31, 0.3);
}

/* Conditional display for guests number */
.form-group.hidden {
    display: none;
}

/* ========== FOOTER ========== */
.invitation-footer {
	text-align: center;
	margin-top: 40px;
	padding-top: 25px;
	border-top: 1px solid var(--cream-dark);
}

.footer-text {
	font-family: var(--font-script);
	font-size: 1.6rem;
	color: var(--olive-dark);
}

.hashtag {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 2px;
	color: var(--olive-medium);
	margin-top: 12px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
	.invitation {
		padding: 50px 25px;
	}

	.photo-section {
		gap: 8px;
	}

	.rings-container {
		padding: 0 2px;
	}

	.timeline {
        gap: 8px;
        justify-content: center;
        padding: 10px 5px;
        margin: 15px auto;
    }

	.landscape-photo {
		margin: 40px -15px;
	}

	.additional-info {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.info-card {
		display: flex;
		align-items: center;
		gap: 15px;
		text-align: left;
		padding: 15px;
	}

	.info-card-icon {
		margin-bottom: 0;
		font-size: 1.8rem;
	}

	.info-card-content {
		flex: 1;
	}
	
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 12px;
    }


}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(25px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.invitation-wrapper.visible .invitation-header { animation: fadeInUp 0.7s ease forwards; }
.invitation-wrapper.visible .date-section { animation: fadeInUp 0.7s ease 0.1s forwards; opacity: 0; }
.invitation-wrapper.visible .photo-section { animation: fadeInUp 0.7s ease 0.2s forwards; opacity: 0; }
.invitation-wrapper.visible .info-section { animation: fadeInUp 0.7s ease 0.3s forwards; opacity: 0; }
.invitation-wrapper.visible .map-section { animation: fadeInUp 0.7s ease 0.4s forwards; opacity: 0; }
.invitation-wrapper.visible .rsvp-section { animation: fadeInUp 0.7s ease 0.5s forwards; opacity: 0; }