/* ========================================
   MISTYRIOUZ HOMEPAGE — FRONTEND STYLES
   Self-contained, mobile-first, no deps
   ======================================== */

.mzh-page-wrapper *,.mzh-page-wrapper *::before,.mzh-page-wrapper *::after{
	margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent
}
.mzh-page-wrapper{
	font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
	background:var(--mzh-pine-deep,#0f1a15);
	color:var(--mzh-mist,#f3f6f3);
	line-height:1.6;
	overflow-x:hidden;
	padding-bottom:72px;
}
.mzh-page-wrapper img,.mzh-page-wrapper svg{display:block;max-width:100%}
.mzh-page-wrapper a{color:inherit;text-decoration:none}
.mzh-page-wrapper a:focus-visible,.mzh-page-wrapper button:focus-visible{outline:2px solid var(--mzh-lime,#c4d600);outline-offset:3px}

/* ---------- LOGO ---------- */
.mz-logo{display:flex;align-items:center;gap:10px}
.mz-logo-mark{width:32px;height:32px;flex-shrink:0}
.mz-logo-mark svg{width:100%;height:100%}
.mz-logo-text{
	font-family:'Fraunces',serif;
	font-style:italic;font-weight:600;font-size:20px;
	color:var(--mzh-mist,#f3f6f3);letter-spacing:.3px
}

/* ---------- DRAWER ---------- */
.mzh-drawer-overlay{
	position:fixed;inset:0;
	background:rgba(10,18,14,0.7);
	backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
	z-index:2000;opacity:0;pointer-events:none;
	transition:opacity .35s ease;
}
.mzh-drawer-overlay.open{opacity:1;pointer-events:auto}
.mzh-drawer{
	position:fixed;top:0;right:0;bottom:0;
	width:min(86vw,380px);
	background:var(--mzh-pine,#1a332d);
	z-index:2001;transform:translateX(100%);
	transition:transform .4s cubic-bezier(.2,.9,.3,1);
	display:flex;flex-direction:column;
	overflow-y:auto;-webkit-overflow-scrolling:touch;
	border-left:1px solid rgba(255,255,255,0.06);
}
.mzh-drawer.open{transform:translateX(0)}
.mzh-drawer-header{
	display:flex;align-items:center;justify-content:space-between;
	padding:20px 24px;
	border-bottom:1px solid rgba(255,255,255,0.06);
}
.mzh-drawer-header .mz-logo-text{font-size:20px}
.mzh-drawer-close{
	width:40px;height:40px;border-radius:50%;
	border:1px solid rgba(255,255,255,0.15);
	background:rgba(255,255,255,0.05);color:var(--mzh-mist);
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;transition:background .2s;
}
.mzh-drawer-close:hover{background:rgba(255,255,255,0.1)}
.mzh-drawer-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.mzh-drawer-body{padding:24px;flex:1}
.mzh-drawer-title{
	font-size:11px;font-weight:700;letter-spacing:.18em;
	text-transform:uppercase;color:var(--mzh-lime,#c4d600);
	margin-bottom:20px;
}
.mzh-drawer-cats{display:flex;flex-direction:column;gap:4px}
.mzh-drawer-cat{
	display:flex;align-items:center;gap:14px;
	padding:14px 16px;border-radius:14px;
	background:rgba(255,255,255,0.03);
	border:1px solid rgba(255,255,255,0.04);
	color:var(--mzh-mist);font-size:15px;font-weight:500;
	transition:background .2s,transform .15s;
	cursor:pointer;min-height:52px;
}
.mzh-drawer-cat:hover{
	background:rgba(196,214,0,0.08);
	border-color:rgba(196,214,0,0.15);
	transform:translateX(4px);
}
.mzh-drawer-cat-icon{
	width:36px;height:36px;border-radius:10px;
	background:rgba(196,214,0,0.1);
	display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mzh-drawer-cat-icon svg{width:18px;height:18px;stroke:var(--mzh-lime,#c4d600);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mzh-drawer-footer{padding:20px 24px;border-top:1px solid rgba(255,255,255,0.06)}
.mzh-drawer-all{
	display:flex;align-items:center;justify-content:center;gap:8px;
	width:100%;padding:14px;border-radius:12px;
	background:var(--mzh-lime,#c4d600);color:var(--mzh-pine-deep,#0f1a15);
	font-size:14px;font-weight:700;border:none;cursor:pointer;min-height:48px;
}
.mzh-drawer-all svg{width:16px;height:16px;stroke:var(--mzh-pine-deep,#0f1a15);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Floating drawer button (when hero topbar is hidden) */
.mzh-drawer-float-btn{
	position:fixed;top:max(18px, env(safe-area-inset-top));right:20px;z-index:10;
	width:40px;height:40px;border-radius:50%;
	border:1px solid rgba(255,255,255,0.2);
	background:rgba(255,255,255,0.06);color:var(--mzh-mist);
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;transition:background .2s;
}
.mzh-drawer-float-btn:hover{background:rgba(255,255,255,0.12)}
.mzh-drawer-float-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- HERO ---------- */
.mzh-hero{
	position:relative;min-height:100svh;
	display:flex;flex-direction:column;
	align-items:center;justify-content:center;
	text-align:center;overflow:hidden;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(39,69,57,0.35) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 80%, rgba(15,26,21,0.9) 0%, transparent 50%),
		linear-gradient(180deg, var(--mzh-pine-deep,#0f1a15) 0%, var(--mzh-pine,#1a332d) 60%, var(--mzh-pine-light,#274539) 100%);
}
.mzh-hero::before{
	content:"";position:absolute;inset:0;
	background:center/cover no-repeat;
	opacity:0.45;mix-blend-mode:soft-light;
}
.mzh-hero::after{
	content:"";position:absolute;bottom:0;left:0;right:0;height:200px;
	background:linear-gradient(to top, var(--mzh-pine-deep,#0f1a15), transparent);
}
.mzh-hero-topbar{
	position:absolute;top:0;left:0;right:0;z-index:10;
	display:flex;align-items:center;justify-content:space-between;
	padding:18px 20px;
	padding-top:max(18px, env(safe-area-inset-top));
}
.mzh-hero-topbar .mz-logo-text{font-size:22px}
.mzh-hero-menu-btn{
	width:40px;height:40px;border-radius:50%;
	border:1px solid rgba(255,255,255,0.2);
	background:rgba(255,255,255,0.06);color:var(--mzh-mist);
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;transition:background .2s;
}
.mzh-hero-menu-btn:hover{background:rgba(255,255,255,0.12)}
.mzh-hero-menu-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.mzh-hero-inner{
	position:relative;z-index:2;padding:0 24px;max-width:720px;
	animation:mzhFadeUp 1s ease-out both;
}
.mzh-hero-inner h1{
	font-family:'Fraunces',serif;
	font-size:clamp(36px, 8vw, 72px);font-weight:600;
	line-height:1.05;letter-spacing:-0.02em;color:var(--mzh-mist,#f3f6f3);
}
.mzh-hero-inner h1 em{color:var(--mzh-lime-bright,#def815);font-style:italic}
.mzh-hero-sub{
	margin-top:18px;font-size:clamp(15px, 2.5vw, 20px);
	color:var(--mzh-fog,#b8c4be);font-weight:400;
	max-width:480px;margin-left:auto;margin-right:auto;line-height:1.5;
}
.mzh-hero-cta{
	display:inline-flex;align-items:center;gap:10px;
	margin-top:36px;background:var(--mzh-lime,#c4d600);
	color:var(--mzh-pine-deep,#0f1a15);font-family:'Inter',sans-serif;
	font-size:15px;font-weight:700;padding:14px 28px;border-radius:30px;
	border:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;
	min-height:48px;
}
.mzh-hero-cta:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 24px rgba(196,214,0,0.25);
}
.mzh-hero-cta svg{width:16px;height:16px;stroke:var(--mzh-pine-deep,#0f1a15);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mzh-hero-scroll-hint{
	position:absolute;bottom:max(28px, env(safe-area-inset-bottom));left:50%;
	transform:translateX(-50%);z-index:2;
	display:flex;flex-direction:column;align-items:center;gap:8px;
	font-size:10px;letter-spacing:.2em;text-transform:uppercase;
	color:var(--mzh-fog,#b8c4be);opacity:.6;
	animation:mzhBob 2.8s ease-in-out infinite;
}

/* ---------- SECTIONS ---------- */
.mzh-section{
	padding:80px 20px;max-width:1200px;margin:0 auto;
}
.mzh-section-head{margin-bottom:40px;max-width:560px}
.mzh-eyebrow{
	font-size:11px;font-weight:700;letter-spacing:.18em;
	text-transform:uppercase;color:var(--mzh-lime,#c4d600);margin-bottom:10px;
}
.mzh-section-head h2{
	font-family:'Fraunces',serif;
	font-size:clamp(28px, 5vw, 40px);font-weight:600;
	line-height:1.1;color:var(--mzh-mist,#f3f6f3);
}
.mzh-section-head p{margin-top:14px;font-size:15px;color:var(--mzh-fog,#b8c4be);line-height:1.6}

/* ---------- TOWNS ---------- */
#mzh-towns{background:var(--mzh-pine-deep,#0f1a15)}
.mzh-towns-grid{
	display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;
}
.mzh-town-card{
	position:relative;aspect-ratio:1 / 1.15;border-radius:20px;
	overflow:hidden;background:var(--mzh-pine,#1a332d);cursor:pointer;
	transition:transform .25s ease,box-shadow .25s ease;
	border:1px solid rgba(255,255,255,0.04);
}
.mzh-town-card:hover,.mzh-town-card:active{
	transform:translateY(-4px) scale(1.01);
	box-shadow:0 20px 40px -12px rgba(0,0,0,0.5);
}
.mzh-town-card img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	opacity:.88;transition:opacity .3s ease,transform .4s ease;
}
.mzh-town-card:hover img{opacity:1;transform:scale(1.05)}
.mzh-town-card::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(180deg, rgba(15,26,21,0) 35%, rgba(15,26,21,0.85) 100%);
}
.mzh-town-card--noimg{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	background:linear-gradient(135deg, var(--mzh-pine,#1a332d) 0%, var(--mzh-pine-light,#274539) 100%);
}
.mzh-town-card--noimg::after{display:none}
.mzh-town-card--noimg .mzh-town-label{
	position:static;text-shadow:none;font-size:clamp(18px, 4vw, 24px);
}
.mzh-town-card--noimg .mzh-town-tagline{
	position:static;opacity:1;transform:none;margin-bottom:8px;
}
.mzh-town-label{
	position:absolute;bottom:14px;left:0;right:0;z-index:2;text-align:center;
	font-family:'Fraunces',serif;font-size:clamp(15px, 3vw, 20px);
	font-weight:600;color:var(--mzh-mist,#f3f6f3);
	text-shadow:0 2px 8px rgba(0,0,0,0.5);letter-spacing:0.01em;
}
.mzh-town-tagline{
	position:absolute;bottom:38px;left:0;right:0;z-index:2;text-align:center;
	font-size:11px;font-weight:500;color:var(--mzh-lime,#c4d600);
	letter-spacing:.08em;text-transform:uppercase;
	opacity:0;transform:translateY(6px);
	transition:opacity .3s ease,transform .3s ease;
}
.mzh-town-card:hover .mzh-town-tagline{opacity:1;transform:translateY(0)}

/* ---------- BLOGS ---------- */
#mzh-blogs{
	background:linear-gradient(180deg, var(--mzh-pine-deep,#0f1a15) 0%, var(--mzh-pine,#1a332d) 100%);
	border-top:1px solid rgba(255,255,255,0.04);
}
.mzh-blogs-grid{
	display:flex;gap:16px;overflow-x:auto;
	scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
	padding:4px 4px 16px;margin:0 -20px;
	padding-left:20px;padding-right:20px;
	scrollbar-width:none;
}
.mzh-blogs-grid::-webkit-scrollbar{display:none}
.mzh-blog-card{
	scroll-snap-align:start;flex:0 0 85%;max-width:340px;
	background:var(--mzh-pine,#1a332d);border-radius:18px;
	overflow:hidden;border:1px solid rgba(255,255,255,0.04);
	transition:transform .25s ease;
}
.mzh-blog-card:hover{transform:translateY(-4px)}
.mzh-blog-card img{width:100%;height:180px;object-fit:cover;opacity:.9;transition:opacity .3s}
.mzh-blog-card:hover img{opacity:1}
.mzh-blog-body{padding:18px}
.mzh-blog-body .mzh-cat{
	font-size:10px;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--mzh-lime,#c4d600);margin-bottom:8px;
}
.mzh-blog-body h3{
	font-family:'Fraunces',serif;font-size:17px;font-weight:600;
	color:var(--mzh-mist,#f3f6f3);line-height:1.3;margin-bottom:8px;
}
.mzh-blog-body p{
	font-size:13px;color:var(--mzh-fog,#b8c4be);line-height:1.55;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mzh-blog-meta{margin-top:14px;font-size:11px;color:rgba(184,196,190,0.6);font-weight:500}

/* ---------- FOOTER ---------- */
.mzh-footer{
	background:var(--mzh-pine-deep,#0f1a15);
	border-top:1px solid rgba(255,255,255,0.04);
	color:var(--mzh-fog,#b8c4be);padding:60px 24px 100px;
}
.mzh-footer-inner{max-width:1100px;margin:0 auto}
.mzh-foot-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mzh-foot-logo .mz-logo-mark{width:40px;height:40px}
.mzh-foot-brand{
	font-family:'Fraunces',serif;font-style:italic;font-size:32px;color:var(--mzh-mist,#f3f6f3);
}
.mzh-foot-tag{font-size:15px;color:var(--mzh-fog,#b8c4be);max-width:320px;line-height:1.5;margin-bottom:40px}
.mzh-foot-cols{
	display:grid;grid-template-columns:1fr 1fr;gap:40px;
	margin-bottom:36px;max-width:500px;
}
.mzh-foot-col h4{
	font-size:11px;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;color:var(--mzh-lime,#c4d600);margin-bottom:16px;
}
.mzh-foot-col a{
	display:block;color:var(--mzh-fog,#b8c4be);font-size:14px;
	padding:8px 0;transition:color .2s;min-height:36px;
}
.mzh-foot-col a:hover{color:var(--mzh-mist,#f3f6f3)}
.mzh-foot-bottom{
	font-size:13px;color:rgba(184,196,190,0.45);
	padding-top:24px;border-top:1px solid rgba(255,255,255,0.06);
}

/* ---------- BOTTOM NAV ---------- */
.mzh-bottom-nav{
	position:fixed;bottom:0;left:0;right:0;z-index:9999;
	display:flex;justify-content:space-around;align-items:center;
	background:rgba(15,26,21,0.96);
	backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
	border-top:1px solid rgba(255,255,255,0.06);
	padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.mzh-bottom-nav a{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:4px;color:var(--mzh-fog,#b8c4be);font-size:10px;font-weight:600;
	flex:1;text-align:center;padding:4px 2px;
	transition:color .2s;min-height:48px;position:relative;
}
.mzh-bottom-nav a svg{width:20px;height:20px;stroke-width:1.5;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mzh-bottom-nav a.active{color:var(--mzh-lime-bright,#def815)}
.mzh-bottom-nav a.active::before{
	content:"";position:absolute;top:-8px;left:50%;
	transform:translateX(-50%);width:4px;height:4px;border-radius:50%;
	background:var(--mzh-lime,#c4d600);
}

/* ---------- ANIMATIONS ---------- */
@keyframes mzhBob{
	0%,100%{transform:translateX(-50%) translateY(0);opacity:.4}
	50%{transform:translateX(-50%) translateY(8px);opacity:.8}
}
@keyframes mzhFadeUp{
	from{opacity:0;transform:translateY(30px)}
	to{opacity:1;transform:translateY(0)}
}

/* ---------- DESKTOP ---------- */
@media(min-width:768px){
	.mzh-page-wrapper{padding-bottom:72px}
	.mzh-section{padding:100px 24px}
	.mzh-towns-grid{
		grid-template-columns:repeat(3, 1fr);gap:20px;
		max-width:900px;margin:0 auto;
	}
	.mzh-town-card{aspect-ratio:1 / 1.1;border-radius:24px}
	.mzh-town-label{font-size:20px;bottom:18px}
	.mzh-town-tagline{bottom:44px;font-size:12px}
	.mzh-blogs-grid{
		display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;
		overflow-x:visible;margin:0;padding:0;max-width:900px;margin:0 auto;
	}
	.mzh-blog-card{flex:none;max-width:none}
	.mzh-blog-card img{height:200px}
	.mzh-foot-cols{grid-template-columns:repeat(2, 1fr);gap:64px}
}

@media(prefers-reduced-motion:reduce){
	.mzh-page-wrapper *{animation:none!important;transition:none!important}
	html{scroll-behavior:auto}
}