/*
  Responsive layout system — default for KO / Japanese Knife project sites
  Breakpoints:
  - Phones: <= 767px (default)
  - Tablets: 768px–1023px
  - Small laptops: 1024px–1279px
  - Desktop: 1280px–1535px
  - Large desktop: >= 1536px (same as desktop; only outer margins grow)
*/
:root {
  --container-max: 720px;
  --container-padding: 16px;
  --grid-columns: 1;
  --grid-gap: 16px;
}

/* Tablets: 768px–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-max: 960px;
    --container-padding: 24px;
    --grid-columns: 8;
    --grid-gap: 20px;
  }
}

/* Small laptops: 1024px–1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --container-max: 1200px;
    --container-padding: 48px;
    --grid-columns: 12;
    --grid-gap: 32px;
  }
}

/* Desktop: 1280px–1535px */
@media (min-width: 1280px) and (max-width: 1535px) {
  :root {
    --container-max: 1440px;
    --container-padding: 48px;
    --grid-columns: 12;
    --grid-gap: 32px;
  }
}

/* Large desktop: >= 1536px — frozen layout; only side margins grow past this width */
@media (min-width: 1536px) {
  :root {
    --container-max: 1440px;
    --container-padding: 48px;
    --grid-columns: 12;
    --grid-gap: 32px;
  }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}