@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin: 0; padding: 0; background-color: rgb(250, 237, 209); }
.main { width: 100%; }
.top-row { background: rgb(250, 237, 209) url('/images/banner2.png') no-repeat center/contain; color: white; padding: 0; min-height: 200px; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; }
.content { padding: 16px; }
.generator {
	max-width: 760px;
	margin: 4px auto 12px auto;
	padding: 24px 20px;
	box-sizing: border-box;
	border: none;
	border-radius: 14px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* flat top, jagged bottom to simulate a torn sheet */
	-webkit-clip-path: polygon(
		0 0, 100% 0, 100% 90%, 96% 93%, 88% 91%, 80% 95%, 72% 91%, 64% 96%, 56% 92%, 48% 97%, 40% 92%, 32% 98%, 24% 94%, 16% 99%, 8% 95%, 0 100%, 0 0
	);
	clip-path: polygon(
		0 0, 100% 0, 100% 90%, 96% 93%, 88% 91%, 80% 95%, 72% 91%, 64% 96%, 56% 92%, 48% 97%, 40% 92%, 32% 98%, 24% 94%, 16% 99%, 8% 95%, 0 100%, 0 0
	);
	background-image:
		repeating-linear-gradient(180deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 20px),
		repeating-linear-gradient(90deg, rgba(0,0,0,0.01) 0 1px, transparent 1px 40px),
		linear-gradient(180deg, #fffaf0 0%, #fbf6ec 100%);
	background-size: 100% 20px, 20px 100%, 100% 100%;
	background-position: 0 0, 0 0, 0 0;
	background-repeat: repeat, repeat, no-repeat;
	background-clip: padding-box;
	/* subtle outer shadow + soft top fold (inset) for a workshop-paper feel */
	box-shadow:
        0 8px 28px rgba(42, 39, 39, 0.25),
        inset 0 -8px 12px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
	color: #222;
    align-items: center;
}

.generator::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background-blend-mode: multiply, multiply, multiply, multiply, normal;
	opacity: 0.85;
	mix-blend-mode: multiply;
	z-index: 1;
}

.generator > * {
	position: relative;
	z-index: 4;
}

.generator::after {
	content: "";
	position: absolute;
	/* extend slightly to create a charred border outside the torn edge */
	inset: -8px;
	pointer-events: none;
	border-radius: inherit;
	-webkit-clip-path: inherit;
	clip-path: inherit;
	transform: translateY(6px) scaleY(1.02);
	background-blend-mode: multiply, multiply, multiply, normal;
	mix-blend-mode: multiply;
	filter: blur(3px) saturate(0.9) contrast(1.05);
	opacity: 0.9;
	z-index: 3;
}
.form-controls { text-align: center; }
.btn {
	/* Brighter, slightly yellow-orange variant close to rgb(230,150,70) */
	background: linear-gradient(135deg, rgb(245,170,80) 0%, rgb(230,150,70) 100%);
	color: #fff;
	border: 6px solid rgba(200,130,60,0.98);
	padding: 14px 28px;
    font-family: 'Cinzel', serif;
	font-size: 1.25rem;
	font-weight: 700;
	cursor: pointer;
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(245,170,80,0.22), 0 0 24px rgba(245,170,80,0.12) inset;
	text-shadow: 0 1px 0 rgba(0,0,0,0.18);
	-webkit-tap-highlight-color: transparent;
	display: block;
	margin: 10px auto;
}
.btn:hover {
	box-shadow: 0 18px 44px rgba(245,170,80,0.30), 0 0 38px rgba(245,170,80,0.20);
}
.btn:active {
	box-shadow: 0 10px 24px rgba(230,150,70,0.24);
}
.btn:focus {
	outline: none;
	box-shadow: 0 0 0 10px rgba(245,170,80,0.14);
}
.elf-name-heading { font-family: 'Cinzel'; font-size: 1.15rem; color: rgb(190,80,55);  margin-top: 8px; font-weight: 700; text-align: center; }
.elf-name { font-family: 'Mountains of Christmas'; font-size: 2.25rem; margin-top: 4px; font-weight: 600; text-align: center; min-height: 110px; }

/* Decorative lead text */

/* Decorative lead text */
.lead {
	font-family: 'Cinzel', serif;
	font-size: clamp(1.1rem, 4vw, 2rem);
	font-weight: 700;
	text-align: center;
	color: rgb(40,85,60);
	letter-spacing: 0.06em;
	text-transform: none;
	margin: 0 0 18px;
	text-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* Responsive embed for Google Form */
.form-embed { width: 100%; max-width: 980px; margin: 1rem auto; }
.form-embed iframe {
	width: 100%;
	border: 0;
	/* Hide scrollbars on the iframe element */
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	height: 1vh; /* increase height so content rarely needs internal scrolling */
	min-height: 300px;
	max-height: 500px;
}

/* On narrow phones prefer opening in new tab; keep embed usable */
@media (max-width: 420px) {
	.form-embed iframe { height: 1vh; }
	.form-mobile-link { text-align: center; margin-top: 0.5rem; }
}

/* Expanded: make the iframe extremely tall so the full form is visible inline
	 (the page will scroll instead of the iframe) */
.form-embed.expanded iframe {
	height: 200px;
	min-height: 1000px;
	max-height: none;
}