/* Yhteinen pohja tyyliluonnoksille: nollaus ja luonnosmerkintä. Kaikki muu on sivukohtaista. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #2f6fed; outline-offset: 3px; }

.luonnos {
  position: relative; z-index: 50;
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between;
  padding: .45rem 1rem; background: #111; color: #eee;
  font: 500 .78rem/1.4 system-ui, sans-serif; letter-spacing: .01em;
}
.luonnos a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}