/* ============================================================
   sections.css — scroll reveal, responsive, accessibility
   ============================================================ */

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Tablet ── */
@media (max-width: 820px) {
  .nav__title { display: none; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  :root {
    --fs-body: 1.18rem;   /* ~19px */
    --fs-lead: 1.32rem;   /* ~21px */
    --lh-body: 1.72;
  }

  .nav { gap: 0.5rem; padding: 0 1rem; }

  .hero { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero h1 { max-width: none; }
  .hero__lead { max-width: none; }
  .hero__quote { padding: 1.25rem 1.4rem; }

  .contents__grid { grid-template-columns: 1fr; }

  .chapter { padding-left: 1.25rem; padding-right: 1.25rem; }

  .stat { flex-direction: column; gap: 0.4rem; align-items: flex-start; }

  .deeper > summary { font-size: 0.98rem; padding: 0.9rem 1rem; }
  .deeper__body { padding: 0 1rem 1rem; }

  .discuss__q p { font-size: 1.15rem; }

  .to-top { width: 48px; height: 48px; right: 1rem; bottom: 1rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Print ── */
@media print {
  .nav, .progress, .to-top, .scroll-hint, .video__play { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .deeper[open] .deeper__body, .deeper__body { display: block !important; }
  a { color: #000; text-decoration: underline; }
  .chapter { page-break-inside: auto; }
}