@media (max-width:700px) {
 .site-header { gap:.5rem; margin:0 1rem; padding:1rem 0; grid-template-columns:1fr auto; }
 .brand { gap:.6rem; grid-column:1 / -1; grid-row:1; justify-self:center; } .brand-name { font-size:.7rem; }
 .clock { grid-row:2; grid-column:1; justify-self:start; margin-top:.5rem; }
 .today { grid-column:2; grid-row:2; padding:.4rem .75rem; }
 .shell { width:calc(100% - 2rem); padding-top:2.5rem; }
 .card-face { min-height:440px; } .intro { margin-bottom:1.5rem; }
 .site-footer { flex-direction:column; align-items:center; text-align:center; }
}
@media (min-width:701px) and (max-width:1024px) { .site-header { gap:.7rem; } .brand-name { font-size:.7rem; } }
@media (prefers-reduced-motion:reduce) { .flashcard { transition:none; } html { scroll-behavior:auto; } }
@media (max-width:430px) {
 .card-meta { gap:.6rem; font-size:.61rem; }
 .back-actions { flex-wrap:wrap; }
 .back-actions .text-button { flex:1 1 180px; }
 .back-actions .flip-button { margin-left:auto; }
 .share-actions button { flex-basis:100%; }
}