/* =============================================================
   Growen Media — base
   LOAD THIS FIRST. header-footer.css and content.css both
   depend on the tokens, reset and container defined here.
   ============================================================= */

:root{
	/* palette */
	--bg:#F2F5EF;
	--bg-alt:#E9EFE4;
	--surface:#FFFFFF;
	--text:#1F2420;
	--text-soft:#5B655C;
	--text-mute:#8A9188;
	--teal:#0F6E56;
	--teal-deep:#085041;
	--teal-tint:#E1F5EE;
	--pop:#639922;
	--pop-tint:#EAF3DE;
	--line:rgba(31,36,32,0.12);
	--line-strong:rgba(31,36,32,0.22);

	/* layout — one place to change the page width */
	--wrap-max:1200px;
	--gutter:clamp(20px, 4vw, 32px);
	--section-y:clamp(56px, 8vw, 104px);

	/* fluid type: scales smoothly instead of jumping at breakpoints */
	--step-h1:clamp(2rem, 1.05rem + 3vw, 3.375rem);   /* 32 -> 54px */
	--step-h2:clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); /* 24 -> 34px */
	--step-h3:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--step-lead:clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
}

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

html{
	scroll-behavior:smooth;
	-webkit-text-size-adjust:100%;
}

body{
	background:var(--bg);
	color:var(--text);
	font-family:'IBM Plex Sans', sans-serif;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

a{color:inherit;}

img,svg,video{max-width:100%; height:auto;}

h1,h2,h3{
	font-family:'Space Grotesk', sans-serif;
	font-weight:600;
	letter-spacing:-0.01em;
	line-height:1.15;
	text-wrap:balance;
}

.mono{font-family:'IBM Plex Mono', monospace;}

/* the container every section sits in */
.wrap{
	width:100%;
	max-width:var(--wrap-max);
	margin-inline:auto;
	padding-inline:var(--gutter);
}

section{padding-block:var(--section-y);}

/* respect the OS "reduce motion" setting */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	*,*::before,*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
	}
}

/* ---------- accessibility helpers ---------- */
.screen-reader-text{
	position:absolute !important;
	width:1px; height:1px;
	margin:-1px; padding:0; border:0;
	overflow:hidden; clip-path:inset(50%);
	white-space:nowrap;
}

.skip-link:focus{
	position:fixed !important;
	top:12px; left:12px; z-index:100;
	width:auto; height:auto; margin:0;
	clip-path:none; overflow:visible;
	padding:12px 18px; border-radius:9px;
	background:var(--teal); color:var(--teal-tint);
	font-size:15px; font-weight:500; text-decoration:none;
	outline:2px solid var(--teal-tint); outline-offset:2px;
}