/* AspiringPeasant — responsive pass.
   NET-NEW: the mocks are desktop-only (1280px); everything here is a
   conservative interpolation from the existing tokens. Flag for design review.
   This is the only stylesheet with viewport @media queries. */

@media (max-width: 960px) {
  .ap-grid { grid-template-columns: repeat(2, 1fr); }
  .gh-content .kg-width-wide { width: 100%; margin-left: 0; }
}

@media (max-width: 860px) {
  .ap-featured { grid-template-columns: 1fr; gap: 28px; }
  .ap-keep-reading__grid { grid-template-columns: 1fr; }
  .ap-card--right { text-align: left; }
}

@media (max-width: 640px) {
  .shell, .ap-archive, .ap-subscribe { padding-left: 20px; padding-right: 20px; }
  .ap-subscribe__card { padding: 34px 24px 32px; }
  .ap-subscribe__title { font-size: 30px; }
  .ap-article { padding: 48px 20px 0; }
  .ap-band-inner, .ap-newsletter-inner, .ap-footer__inner { padding-left: 20px; padding-right: 20px; }
  .ap-grid { grid-template-columns: 1fr; }

  .ap-hero { height: 440px; }
  .ap-hero__header { padding: 16px 20px; }
  /* wrapped nav is ~2 rows tall; shift the capsule down clear of it */
  .ap-hero__center { padding-top: 120px; padding-bottom: 60px; }
  .ap-hero__capsule { padding: 28px 32px; border-radius: 32px; }
  .ap-hero__wordmark { font-size: 44px; }
  .ap-hero__wordmark--logo img { max-width: 78vw; max-height: 92px; }
  .ap-nav { flex-wrap: wrap; justify-content: flex-end; gap: 12px 18px; }

  .ap-band { height: 120px; }
  .ap-band__header { padding: 0 20px; }
  .ap-band .ap-wordmark { font-size: 17px; }
  .ap-band .ap-wordmark--logo img { height: 21px; }

  .ap-post-header__title { font-size: 38px; }
  .ap-archive__title { font-size: 34px; }
  .ap-featured__title { font-size: 32px; }
  .ap-404__title { font-size: 38px; }

  .ap-newsletter__row { flex-direction: column; }
  .ap-newsletter__row .ap-btn { justify-content: center; }
}

@media (max-width: 560px) {
  .ap-row { grid-template-columns: 1fr auto; padding: 16px 4px; }
  .ap-row__date { order: 2; }
  .ap-row__title { grid-column: 1 / -1; }
  .ap-footer__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}