/* Responsive and lightweight presentation overrides for the static public pages. */
:root { color-scheme: dark; }
html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; overflow-x: clip; }
img, video, iframe, svg, canvas { max-width: 100%; }
img { height: auto; }
main, section, header, footer, nav, article, aside { min-width: 0; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
.table-responsive, .overflow-x-auto { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
button, input, select, textarea { max-width: 100%; }
input, select, textarea { min-width: 0; }
@media (max-width: 768px) {
  .container { width: 100%; max-width: 100%; }
  h1 { overflow-wrap: anywhere; }
  p, li, a { overflow-wrap: anywhere; }
  table { min-width: 560px; }
  section, article { scroll-margin-top: 80px; }
  nav .container { gap: 12px; }
  nav a { max-width: 100%; }
  footer .container { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(1.8rem, 9vw, 2.7rem); line-height: 1.12; }
  h2 { font-size: clamp(1.35rem, 6vw, 2rem); line-height: 1.2; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  button, .btn, a[role="button"] { touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Readability: Tailwind tracking-tighter (-0.05em) on weight-900 headings squeezes letters and
   word gaps together. Loosen the tracking, add a little word spacing and line height. */
.tracking-tighter { letter-spacing: -0.01em !important; }
.tracking-tight { letter-spacing: 0 !important; }
h1, h2, h3, h4 { word-spacing: 0.1em; }
h1 { line-height: 1.15 !important; }
h2 { line-height: 1.2 !important; }
p, li { word-spacing: 0.02em; }