/* Mobile-first base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.35;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

:focus-visible{outline:none; box-shadow: var(--focus-ring); border-radius: 10px}

/* Container: fluido en mobile, acotado en desktop */
.container{
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Typography: escalas que no rompen en mobile */
h1,h2,h3{margin:0 0 10px; color: var(--ink-strong)}
h1{font-size: 28px; line-height:1.1; font-weight: var(--fw-extrabold)}
h2{font-size: 20px; line-height:1.2; font-weight: var(--fw-extrabold)}
h3{font-size: 16px; line-height:1.2; font-weight: var(--fw-bold)}

p{margin:0 0 10px}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line); margin: 16px 0}

/* Spacing helpers */
.spacer-1{height:8px}
.spacer-2{height:12px}
.spacer-3{height:16px}
.spacer-4{height:24px}

/* Desktop typography bump */
@media (min-width: 900px){
  h1{font-size: 36px}
  h2{font-size: 24px}
}