/* ==========================================================================
   The Printer's Devil — responsive layer (mobile-first adjustments)
   Breakpoints: 1024px / 768px / 480px / 320px
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --measure: 52rem; }
}

@media (max-width: 768px) {
  body { font-size: 1rem; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.28rem; }

  .masthead__row { align-items: flex-start; }
  .logo img { width: 218px; height: 77px; }

  /* collapsible navigation (flex so the CSS hamburger glyph gets its box) */
  .nav__toggle { display: flex; }
  .nav__list { display: none; flex-direction: column; gap: 0; padding-bottom: .6rem; }
  .nav__list.is-open { display: flex; }
  .nav__list li { border-top: 1px solid var(--rule-soft); }
  .nav__list a { display: block; padding: .6rem 0; }

  .book { gap: 1.25rem; }
  .book__aside { flex: 1 1 100%; max-width: 20rem; }
  .toc { column-count: 1 !important; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 1rem; }
  h1 { font-size: 1.5rem; }
  .lede { font-size: 1.05rem; }
  .logo img { width: 190px; height: 67px; }

  .catalog > li { flex-direction: column; gap: .75rem; }
  .catalog__thumb img { width: 108px; }

  .order { padding: 1rem; }
  .btn { display: block; text-align: center; }
  .btn + .btn { margin: .5rem 0 0; }

  .gallery { grid-template-columns: 1fr; }
  .footer__links { flex-direction: column; gap: 0; }
  /* comfortable touch targets in the footer list */
  .footer__links li { border-top: 1px solid var(--rule-soft); }
  .footer__links a { display: block; padding: .7rem 0; }
}

@media (max-width: 320px) {
  .wrap { padding: 0 .75rem; }
  .logo img { width: 165px; height: 58px; }
}

/* Respect reduced-motion preferences (site uses no decorative motion). */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}