/* Reset & sensible defaults */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; font-synthesis-weight: none; text-rendering: optimizeLegibility; }

/* Fluid media */
img, picture, video, canvas, svg { max-width: 100%; height: auto; }

/* Layout helpers */
:root { --container: 1200px; --gap: 1rem; }
main, .container, .wrapper, .content, .inner {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--gap);
}
section { padding-block: clamp(1rem, 2vw, 2rem); }

/* Tables scroll on small screens */
table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; white-space: nowrap; }

/* Forms fit the screen */
input, select, textarea, button { max-width: 100%; font: inherit; }

/* Make common grids responsive without changing HTML */
.gallery, .grid, .cards, .columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--gap);
}
.card, .tile { border-radius: 0.75rem; overflow: hidden; }

/* Navigation wraps nicely */
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
nav a { text-decoration: none; }

/* Avoid overflow on headings and code */
pre, code { white-space: pre-wrap; word-wrap: break-word; }

/* Small-screen typography */
@media (max-width: 480px) {
  html { font-size: 16px; }
  h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
  h3 { font-size: clamp(1.125rem, 4.5vw, 1.25rem); }
}

/* Utilities */
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.hide-overflow { overflow: hidden; }
.fit { width: 100%; }