.sound-section { scroll-margin-top: 100px; margin-top: 40px; }
.blend-heading { flex-wrap: wrap; }
.vowel-grid, .consonant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.vowel-grid .blend-card, .consonant-grid .blend-card { margin: 0; min-width: 0; }
.vowel-card { padding: 24px; }
.vowel-card h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.ipa-symbol { font-size: 32px; color: #793900; font-weight: 600; }
.vowel-example { font-size: 17px; font-weight: 400; color: #596574; }
.vowel-card figure { margin: 0; }
.vowel-motion { display: block; width: 100%; height: auto; border: 1px solid #e8ded1; border-radius: 14px; background: #fffaf3; }
.vowel-card .motion-toggle { margin-top: 14px; padding: 8px 16px; font-size: 14px; }
.vowel-card .words { margin: 18px 0 0; font-size: 18px; }
.place-label { color: #596574; font-weight: 600; }
.practice-words { background: #fff2e4; border-radius: 8px; padding: 12px; color: #603a20; }
.topics-grid .topic-card { min-width: 0; }
a { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .vowel-grid, .consonant-grid { grid-template-columns: 1fr; }
  .sound-section { margin-top: 32px; }
  .vowel-card { padding: 18px; }
}
@media print {
  .site-header, .motion-toggle, .blend-nav { display: none; }
  .blend-card { break-inside: avoid; }
  .topics-main { max-width: none; }
}
/* Preserve paired diagrams at a readable scale on narrow screens. */
.minimal-pair-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); overflow-x: auto; }
.minimal-pair-grid .words { list-style: none; padding: 0; display: grid; gap: 8px; }
@media print { .minimal-pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } }

/* Compact navigation cards on the IPA landing page. */
.ipa-section-cards { grid-template-columns: repeat(3, minmax(0, 280px)); gap: 16px; }
.ipa-section-cards .topic-card { min-height: 0; padding: 20px; gap: 8px; }
.ipa-section-cards .topic-card h2 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.ipa-section-cards .topic-card p { font-size: .9rem; line-height: 1.5; }
@media (max-width: 700px) {
  .ipa-section-cards { grid-template-columns: 1fr; }
  .ipa-section-cards .topic-card { padding: 16px 20px; }
}