/* styles/base.css */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

/* The UA rule for [hidden] is display:none at the lowest specificity, so any class that
   sets display beats it and the element stays visible. This bit: the gameweek bar has
   display:flex and ignored its hidden attribute entirely. */
[hidden] { display: none !important; }

body {
  background: var(--ground);
  color: var(--fg-1);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
}

h1, h2, h3 { line-height: 1.1; text-wrap: balance; }
p { max-width: var(--measure); text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; min-height: var(--tap); }

.wrap { padding-inline: 16px; margin-inline: auto; max-width: 900px; }
@media (min-width: 720px) { .wrap { padding-inline: 30px; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}