/* base.css — layout and responsive behavior only. No colors.
   Targets the real Hermes board markup: .board (the row) > .column > h2 + .card.
   Skins (skins/<name>.css) own all color, radius, shadow, and font choices. */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; min-height: 100vh; padding: 1.5rem; }

h1 { font-size: 1.5rem; margin-bottom: 1.25rem; }

.board { display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; }
.column { flex: 1 1 0; min-width: 0; width: auto; border-radius: 8px; padding: .75rem; }
.column h2 { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }

.card { border-radius: 6px; padding: .625rem .75rem; margin-bottom: .5rem; font-size: .9rem; }

@media (max-width: 700px) {
  .board { scroll-snap-type: x mandatory; gap: .5rem; }
  .column { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
}