:root {
	--ink: #183239;
	--cream: #fff5d6;
	--sky: #9ad4dd;
	--sun: #ffe29a;
	--leaf: #35674d;
	--leaf-dark: #214b3d;
	--grass: #5b9660;
	--earth: #ab754e;
	--pink: #e98480;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-width: 320px;
	color: var(--ink);
	background: var(--cream);
	font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
}

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: min(760px, 100svh);
	padding: clamp(2rem, 7vw, 6rem) 1.5rem 0;
	background: var(--sky);
	text-align: center;
}

.hero::before {
	position: absolute;
	inset: 0;
	z-index: -2;
	content: "";
	opacity: .24;
	background-image: radial-gradient(#fff 1px, transparent 1px);
	background-size: 18px 18px;
}

.hero-content { position: relative; z-index: 3; max-width: 680px; margin: auto; }
.eyebrow, h1 { font-family: "Courier New", monospace; }
.eyebrow { margin: 0 0 1.5rem; color: var(--leaf-dark); font-size: clamp(.55rem, 1.5vw, .75rem); letter-spacing: .05em; }
h1 { margin: 0; color: var(--cream); font-size: clamp(2rem, 8vw, 4.4rem); line-height: 1.22; letter-spacing: .05em; text-shadow: 4px 4px 0 var(--leaf-dark), 8px 8px 0 rgba(24, 50, 57, .16); }
.tagline { margin: 1.8rem 0 .5rem; font-weight: 800; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.intro { max-width: 560px; margin: 0 auto; font-size: clamp(1rem, 2vw, 1.2rem); }
.status { display: inline-flex; align-items: center; gap: .55rem; margin: 1.75rem 0; padding: .48rem .9rem; border: 3px solid var(--ink); background: var(--cream); box-shadow: 4px 4px 0 var(--ink); font-weight: 800; }
.status span { width: .65rem; height: .65rem; background: var(--pink); box-shadow: 0 0 0 2px var(--ink); animation: blink 1.7s steps(2) infinite; }

.sun { position: absolute; top: 7%; right: max(8%, calc((100% - 1040px) / 2)); z-index: -1; width: 84px; aspect-ratio: 1; background: var(--sun); box-shadow: 8px 0 var(--sun), -8px 0 var(--sun), 0 8px var(--sun), 0 -8px var(--sun); }
.cloud { position: absolute; width: 100px; height: 20px; background: rgba(255, 255, 255, .75); box-shadow: 24px -18px rgba(255,255,255,.75), 52px -8px rgba(255,255,255,.75); }
.cloud-one { top: 19%; left: 10%; }.cloud-two { top: 35%; right: 13%; transform: scale(.65); }

.landscape { position: absolute; right: 0; bottom: 0; left: 0; height: 42%; z-index: 1; }
.mountain { position: absolute; bottom: 17%; width: 0; height: 0; border-right: 180px solid transparent; border-bottom: 230px solid #568882; border-left: 180px solid transparent; }
.mountain-back { left: -70px; opacity: .65; }.mountain-front { right: -85px; border-right-width: 230px; border-bottom: 290px solid #47776c; border-left-width: 230px; }
.grass { position: absolute; right: 0; bottom: 0; left: 0; height: 24%; background: var(--grass); box-shadow: inset 0 8px 0 #8aba70; }
.cottage { position: absolute; bottom: 16%; left: 50%; width: 138px; height: 92px; background: #efba71; border: 6px solid var(--ink); transform: translateX(-50%); box-shadow: 8px 8px 0 rgba(24, 50, 57, .2); }
.roof { position: absolute; top: -57px; left: -17px; width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 58px solid #ce7262; border-left: 80px solid transparent; }.door { position: absolute; bottom: 0; left: 52px; width: 30px; height: 45px; background: var(--earth); border: 4px solid var(--ink); border-bottom: 0; }.window { position: absolute; top: 22px; left: 18px; width: 24px; height: 23px; border: 4px solid var(--ink); background: var(--sun); box-shadow: 51px 0 0 -4px var(--sun), 51px 0 0 0 var(--ink); }
.tree { position: absolute; bottom: 16%; width: 50px; height: 145px; background: var(--earth); border: 5px solid var(--ink); }.tree::before, .tree i, .tree b { position: absolute; content: ""; width: 110px; height: 55px; background: var(--leaf); border: 5px solid var(--ink); }.tree::before { top: -40px; left: -35px; }.tree i { top: -78px; left: -30px; background: var(--leaf-dark); }.tree b { top: -115px; left: -25px; }.tree-left { left: 12%; }.tree-right { right: 12%; transform: scale(.85); transform-origin: bottom; }

.about { max-width: 760px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; text-align: center; }.about h2 { margin: 0 0 1rem; font-family: "Courier New", monospace; font-size: clamp(1rem, 3vw, 1.5rem); line-height: 1.75; }.about p { margin: auto; max-width: 620px; font-size: 1.15rem; }.features { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; padding: 0; margin: 2rem 0 0; list-style: none; }.features li { padding: .4rem 1rem; border: 3px solid var(--ink); background: #d8e8ad; box-shadow: 3px 3px 0 var(--ink); font-weight: 800; }
footer { padding: 1.5rem; background: var(--ink); color: var(--cream); text-align: center; font-size: .9rem; }
@keyframes blink { 50% { opacity: .35; } }
@media (max-width: 600px) { .tree-left { left: -12px; }.tree-right { right: -22px; }.cloud { display: none; }.landscape { height: 37%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }