@font-face {
  font-family: 'Monument Grotesk';
  src: url('../fonts/MonumentGrotesk-Regular.woff2') format('woff2'),
       url('../fonts/MonumentGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monument Grotesk';
  src: url('../fonts/MonumentGrotesk-Bold.woff2') format('woff2'),
       url('../fonts/MonumentGrotesk-Bold.woff') format('woff');
  font-weight: 700; /* bold */
  font-style: normal;
  font-display: swap;
}

/* optional: stop the browser faking missing weights/styles */
html { font-synthesis: none; }


body { font-family: 'Monument Grotesk', system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }

/* Heading scale (defaults to regular) */
h1, h2, h3 {
  font-family: 'Monument Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;          /* nice multi-line titles (supported in modern browsers) */
	margin: 0;
}

h1 { font-size: 50px; line-height: 1; }
h2 { font-size: 40px; line-height: 1; }
h3 { font-size: 30px; line-height: 1.2; }

/* Ensure bold bits inside headings render at the bold face */
:where(h1,h2,h3) :is(strong,b) { font-weight: 700; }

/* Optional: tiny utilities if you prefer spans over <strong> */
.fw-400 { font-weight: 400; }
.fw-700 { font-weight: 700; }

/* If you want some headings to default to bold without wrapping text */
.h-bold { font-weight: 700; }


/* base */
p {
  font-family: 'Monument Grotesk', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.2;
	margin: 0;
}

/* small paragraph (10px) */
:where(p).small,
.text-small {
  font-size: 12px;
}

/* keep bold working inside small text */
:where(p).small strong,
.text-small strong {
  font-weight: 700;
}


/*  :root { --radius: 40px; } */




/* Tablet */
@media (min-width: 768px) {
	
	:root { --radius: 50px; }
	
	h3 { font-size: 40px; line-height: 1; }
	.search-input { 
		width: 620px; 
	    height: 80px;
    	padding: 0 30px;
    	font-size: 40px;
		}
	p { font-size: 24px; line-height: 1.2; }
}

/* Desktop */
@media (min-width: 1200px) {
	
	:root { --radius: 60px; }

	h3 { font-size: 50px; line-height: 1; }
	.search-input { 
		width: 760px; 
	    height: 90px;
    	padding: 0 35px;
    	font-size: 50px;
		}
	p { font-size: 28px; line-height: 1.2; }
}