/* ===========================================================
   Responsive
   =========================================================== */

@media (max-width: 1080px) {
  .lb-row { grid-template-columns: 56px 80px 1fr 220px 92px; gap: 16px; }
  .lb-title { font-size: 26px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .chapter-hero { grid-template-columns: 1fr; gap: 32px; }
  .chap-rhs { border-left: none; padding-left: 0; border-top: 1px solid var(--paper-3); padding-top: 24px; }
  .chap-body { grid-template-columns: 1fr; gap: 48px; }
  .chap-side { position: static; }
  .gadgets { grid-template-columns: 1fr; }
  .gadget { border-right: none; border-bottom: 1px solid var(--paper-3); }
  /* FMI section stacks on tablet */
  [style*="1fr auto 1fr"] { grid-template-columns: 1fr !important; text-align: center !important; }
}
@media (max-width: 800px) {
  .hero-question-row { grid-template-columns: 1fr; }
  .hero-question-row .mascot-wrap { justify-self: start; }
}
@media (max-width: 720px) {
  .lb-row { grid-template-columns: 48px 1fr 80px; }
  .lb-year, .mmi-bars { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
  #mmi-legend { grid-template-columns: 1fr !important; gap: 16px !important; }
  .section-head { grid-template-columns: 1fr !important; }
  .section-head .mid, .section-head .rhs { display: none; }
  .overlay-meta { grid-template-columns: 1fr !important; }
  .overlay-legend { flex-wrap: wrap; }
  .mmi-row { grid-template-columns: 1fr 80px !important; }
  .mmi-row-track { display: none; }
}

@media (max-width: 480px) {
  .masthead-meta { display: none; }
  .masthead-inner { grid-template-columns: 1fr !important; justify-items: center; }
  .masthead-title { font-size: 20px; }
  .scoreboard-lbl { display: none; }
  .scoreboard-track { grid-template-columns: 1fr !important; }
  .hero-question { font-size: 28px !important; }
  .chap-title { font-size: 36px !important; }
}

/* ===========================================================
   Animation
   =========================================================== */

@keyframes drawIn {
  from { stroke-dashoffset: 3000; }
  to { stroke-dashoffset: 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 520ms cubic-bezier(.2,.7,.2,1) both; }