Media Queries

/* Mobile-first: base styles target small screens */
body { font-size: 14px; }

@media (min-width: 768px) {
  body { font-size: 16px; }
  .layout { display: grid; grid-template-columns: 1fr 3fr; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

/* Print styles */
@media print {
  .nav, .ads { display: none; }
  body { color: black; }
}

/* Dark scheme via preference */
@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #eee; }
}

/* Orientation and pointer */
@media (orientation: landscape) { padding: 0; }
@media (hover: none) { .tip { display: block; } }  /* touch */