/**
 * base.css — Reset, variables, tipografía, layout.
 * Aesthetic: minimal editorial (meowrhino.studio)
 */

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-muted: #999;
  --color-border: #e0e0e0;
  --color-hover: #555;
  --color-inactive: #bbb;

  --font-serif: "Inknut Antiqua", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --size-xs: 0.6rem;
  --size-sm: 0.7rem;
  --size-base: 0.75rem;
  --size-md: 0.8rem;
  --size-lg: 0.9rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: var(--font-sans);
  background: var(--color-white);
  color: var(--color-black);
  min-height: 100vh;
  padding: 2rem 2rem 0;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

main {
  max-width: 960px;
  margin: 0 auto;
}

footer {
  text-align: center;
  padding: 1.5rem 0;
}

footer a {
  font-family: var(--font-serif);
  font-size: var(--size-sm);
  font-weight: 300;
  color: var(--color-muted);
  text-decoration: none;
  letter-spacing: 0.03em;
}

footer a:hover { color: var(--color-black); }

/* --- Links --- */
a { color: var(--color-black); }
a:hover { color: var(--color-hover); }

@media (max-width: 768px) {
  body { padding: 1.5rem 1rem 2rem; }
  footer { padding: 0.75rem 0; }
}