/* ================================
   Mobile-friendly typography & layout
   ================================ */

/* 1200px and below – start scaling up slightly */
@media (max-width: 1200px) {
  html {
    font-size: 110%;    /* ~17.6px if base is 16px */
  }

  body {
    line-height: 1.7;
  }
}

/* 900px and below – tablet / small laptop */
@media (max-width: 900px) {
  html {
    font-size: 115%;    /* ~18.4px */
  }

  body {
    line-height: 1.75;
  }

  /* If you have a sidebar/content layout */
  .sidebar {
    width: 100%;
    position: static;
    margin-bottom: 24px;
  }

  .content,
  .main-content,
  .site-main {
    width: 100%;
  }
}

/* 600px and below – phones */
@media (max-width: 600px) {
  html {
    font-size: 120%;    /* ~19.2px */
  }

  body {
    padding: 0 16px;    /* keep text off the edges */
  }

  h1 {
    font-size: 2rem;
    line-height: 1.25;
  }

  h2 {
    font-size: 1.7rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.4rem;
  }

  p,
  li {
    font-size: 1.05rem;
  }

  /* If you’re using any grid of posts/images */
  .posts-grid,
  .grid,
  .masonry-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-mobile, 20px);
  }
}