/* ==========================================================================
   responsive.css: layout changes for smaller screens
   Loaded after style.css on every page
   ========================================================================== */

/* ---------- Small laptops and tablets (landscape) ---------- */
@media (max-width: 1040px) {
  :root { --rail: 180px; --gutter: 28px; }

  .hero__grid { gap: 48px; }
  .section__grid { gap: 40px; }
  .numbers__value { font-size: 3rem; }
}

/* ---------- Tablets (portrait) ---------- */
@media (max-width: 860px) {
  :root { --gutter: 24px; }

  /* Navigation collapses behind a Menu button */
  .nav-toggle { display: inline-flex; }

  .site-header { position: relative; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: 14px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--line); font-weight: 600; }
  .nav .btn { margin-top: 20px; align-self: flex-start; }

  /* Section title moves above its content */
  .section { padding: 64px 0; }
  .section__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .hero { padding: 32px 0 64px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__media { order: -1; max-width: none; }

  .numbers { padding: 48px 0; }
  .numbers__grid { gap: 28px; }
  .numbers__value { font-size: 2.5rem; }

  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .page-head { padding: 32px 0 40px; }
  .article { padding-bottom: 72px; }
}

/* ---------- Large phones ---------- */
@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .lead { font-size: 1.25rem; }

  .card-grid,
  .media-grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .numbers__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .numbers__label { max-width: none; }

  .card { padding: 22px; }
  .card__top { flex-direction: column; gap: 4px; }
  .card__meta { white-space: normal; }

  .book { flex-direction: column; align-items: flex-start; padding: 22px; }

  .post-row,
  .appear { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .post-row { padding: 22px 0; }
  .post-row__date, .appear__when { padding-top: 0; }
  .post-row__title { font-size: 1.375rem; }

  /* The bar labels get too tight, so the key underneath carries them */
  .retain__bar { height: 44px; }
  .retain__paid { font-size: 0; padding: 0; }
  .retain__key { flex-direction: column; gap: 4px; }

  .prose { font-size: 1.125rem; }
  .prose h2 { font-size: 1.5rem; }

  .status dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .status dd { margin-bottom: 12px; }
  .status dd:last-child { margin-bottom: 0; }

  .article__nav { flex-direction: column; gap: 12px; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
  :root { --gutter: 16px; }

  .brand { font-size: 1.125rem; }
  .hero__title, .page-head__title { font-size: 2rem; }
  .btn-row .btn { width: 100%; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .btn-row, .filter, .article__nav { display: none; }
  body { background: #fff; }
  .numbers { background: none; color: #000; }
}

/* ---------- Research comparison on phones ---------- */
@media (max-width: 640px) {
  .compare__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; }
  .compare__label { grid-column: 1 / -1; }
  .compare__row--head > :first-child { display: none; }
  .compare__row--head { font-size: 1.125rem; }
  .compare__row--end { font-size: 1.125rem; }
}

/* ---------- Research smile curve on phones ---------- */
@media (max-width: 640px) {
  .smile--wide { display: none; }
  .smile--narrow { display: block; }
  .smile__key { display: block; }
}