html { font-size: clamp(14px, 2vw, 18px); }

/* 2) Consistent sizing & spacing */
*, *::before, *::after { box-sizing: border-box; }

/* 3) Page container: full-width on phones, centered on larger screens */
.container {
  width: 100%;
  max-width: 1200px;   /* cap line-length on big screens */
  margin: 0 auto;
  padding: 0 16px;     /* safe side padding on phones */
}

/* 4) Images & media scale to their container */
img, video, canvas, svg { max-width: 100%; height: auto; display: inline-block;}

/* 5) Make iframes (e.g., maps, YouTube) responsive */
.responsive-frame {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.responsive-frame iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* 6) Flexible layout: stack on mobile, columns on wider screens */
.grid {
  display: grid; gap: 1.25rem;  /* space between cards/columns */
}
@media (min-width: 700px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* 7) Nav that wraps nicely on mobile */
.nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* 8) Buttons/inputs scale with type */
button, input, textarea, select { font: inherit; }

/* 9) Kill accidental horizontal scroll from rogue elements */
html, body { overflow-x: hidden; }