/* ===== Retro Mundial — base.css ===== */
:root {
  --ink: #2b2118;
  --ink-soft: #4a3c2e;
  --paper: #f4ecdc;
  --paper-2: #ece0c8;
  --paper-3: #e3d4b6;
  --sepia: #8a6a3a;
  --sepia-deep: #6b4f28;
  --accent: #9c3b1b;
  --accent-2: #c2783a;
  --line: #c9b48c;
  --line-soft: #d8c7a3;
  --gold: #b08642;
  --shadow: rgba(43, 33, 24, 0.18);
  --serif: "Playfair Display", "Lora", Georgia, "Times New Roman", serif;
  --serif-body: "Lora", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --maxw: 1160px;
  --radius: 3px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--serif-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25) 0, transparent 60%),
    repeating-radial-gradient(circle at 0 0, transparent 0, transparent 2px, rgba(107,79,40,0.035) 2px, rgba(107,79,40,0.035) 3px);
  background-attachment: fixed;
  line-height: 1.65;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

a { color: var(--accent); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--accent-2); }

img { max-width: 100%; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

blockquote {
  margin: 1.6em 0;
  padding: .6em 0 .6em 1.4em;
  border-left: 4px solid var(--accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
}

hr {
  border: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
  margin: 2.4em 0;
}

::selection { background: var(--accent); color: var(--paper); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 .8em;
  display: inline-block;
}

.muted { color: var(--ink-soft); }
.center { text-align: center; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus { left: 10px; top: 10px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }