/* Blog MatesMx. Misma paleta y tipografia que app/styles.css y legal/.
   Editorial, papel, hairlines. Sin sombras, sin degradados. */
:root {
  --bg: #F3ECDA;
  --bg-soft: #EBE3CD;
  --panel: #FBF7EC;
  --line: #E0D6BD;
  --line-strong: #CDC0A2;
  --text: #322E26;
  --text-2: #574F3F;
  --muted: #5C5446;
  --gold: #8F7223;
  --gold-deep: #806418;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #8F722333; }

a { color: var(--gold-deep); }
a:hover { color: var(--gold); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px 72px; }

.top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand svg { width: 28px; height: 28px; flex: none; }
.brand .wm {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.brand .wm i {
  color: var(--gold);
  font-style: italic;
  font-size: 17px;
  margin-left: 2px;
}
.nav {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: 14.5px;
}
.nav a { text-decoration: none; color: var(--text-2); }
.nav a:hover { color: var(--gold-deep); }
.nav a[aria-current="page"] { color: var(--text); }

.kicker {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}
h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.05rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.dek {
  font-size: 1.12rem;
  color: var(--text-2);
  margin: 0 0 8px;
  max-width: 40rem;
}
.meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 34px;
}

article p { margin: 0 0 1.05em; max-width: 40rem; }
article h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 2.1em 0 0.7em;
}
article ul {
  margin: 0 0 1.15em;
  padding-left: 1.2em;
  max-width: 40rem;
}
article li { margin: 0.35em 0; }
.math {
  font-family: var(--serif);
  font-style: italic;
}
.pull {
  margin: 1.6em 0 1.7em;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--gold);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.45;
  max-width: 38rem;
}
.notes {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.92rem;
}
.notes h2 { font-size: 1.1rem; margin-top: 0; }
.notes p { margin: 0 0 0.7em; }

.cta {
  margin: 40px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}
.cta p { margin: 0 0 12px; color: var(--text-2); font-size: 1rem; }
.btn {
  display: inline-block;
  background: var(--gold-deep);
  color: #FBF7EC;
  text-decoration: none;
  font-size: 15.5px;
  padding: 10px 16px;
  border-radius: 7px;
}
.btn:hover { background: var(--gold); color: #FBF7EC; }

.foot {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}
.foot a { margin-right: 14px; text-decoration: none; }

.index-list { list-style: none; padding: 0; margin: 0; }
.index-list li {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.index-list a.title {
  font-family: var(--serif);
  font-size: 1.45rem;
  text-decoration: none;
  color: var(--text);
  display: block;
  margin-bottom: 6px;
}
.index-list a.title:hover { color: var(--gold-deep); }
.index-list .when { color: var(--muted); font-size: 0.9rem; display: block; margin-bottom: 8px; }
.index-list .blurb { color: var(--text-2); margin: 0; max-width: 40rem; }

@media (max-width: 640px) {
  html, body { font-size: 17px; }
  h1 { font-size: 1.7rem; }
  .wrap { padding: 0 18px 56px; }
}