/* Thoughts: portada y pensamiento. Todos los valores vienen de tokens.css (ver la skill design-tokens). */

.page {
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--space-5xl)) var(--gutter-edge) var(--space-6xl);
}

/* ---------- Cabecera de página ---------- */
.page-head { margin-bottom: var(--space-4xl); }
.kicker {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-soft);
}
.page-head h1, .post-head h1 {
  margin: 0;
  font-family: var(--font-heavy); font-weight: var(--weight-regular);
  font-size: var(--text-page-title); line-height: var(--leading-none);
  /* palabras largas (sobre todo en sueco) se cortan con guion en pantallas estrechas */
  overflow-wrap: break-word; hyphens: auto;
}
.lead { margin: var(--space-3xl) 0 0; max-width: var(--measure-text); font-size: var(--text-lead); line-height: var(--leading-story); }

/* ---------- Filtros ---------- */
.filters {
  position: sticky; top: var(--nav-h); z-index: var(--z-copy);
  display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none;
  margin-bottom: var(--space-xl); padding: var(--space-md) 0;
  background: var(--color-bg); border-bottom: var(--border-hair) solid var(--color-rule);
}
.chip {
  flex: none; padding: var(--space-2xs) var(--space-lg);
  font: inherit; font-size: var(--text-sm); color: inherit; background: none; cursor: pointer;
  border: var(--border-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover, .chip.active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

/* ---------- Lista de pensamientos ---------- */
.posts { margin: 0; padding: 0; list-style: none; }
.post-card { border-top: var(--border-hair) solid var(--color-rule); }
.post-card:first-child { border-top: 0; }
.post-card[hidden] { display: none; }
.post-link { display: block; padding: var(--space-4xl) 0; color: inherit; text-decoration: none; }
.post-link img { display: block; width: 100%; margin-bottom: var(--space-3xl); border: var(--border-hair) solid var(--color-rule); }
.post-meta { margin: 0 0 var(--space-xs); font-size: var(--text-sm); color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.post-card h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-section); font-weight: var(--weight-bold); line-height: var(--leading-story);
  transition: color var(--dur-fast) var(--ease);
}
.post-card.featured h2 { font-family: var(--font-heavy); font-weight: var(--weight-regular); font-size: var(--text-featured); line-height: var(--leading-tight); }
.post-link:hover h2 { color: var(--color-accent); }
.excerpt { margin: 0 0 var(--space-xl); max-width: var(--measure-text); font-size: var(--text-base); line-height: var(--leading-loose); color: var(--color-text-soft); }
.empty { padding: var(--space-4xl) 0; color: var(--color-text-soft); }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: var(--space-2xs) var(--space-md);
  border: var(--border-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--color-text-soft);
}

/* ---------- Pensamiento ---------- */
.read-progress { position: fixed; z-index: var(--z-chrome); top: var(--nav-h); left: 0; right: 0; height: var(--border-strong); }
.read-progress span { display: block; width: 0; height: 100%; background: var(--color-accent); }

.post-head { margin-bottom: var(--space-4xl); }
.back { display: inline-block; margin-bottom: var(--space-3xl); font-size: var(--text-sm); color: var(--color-text-soft); text-decoration: none; }
.back:hover { color: var(--color-accent); }
.post-head .tags { margin-bottom: var(--space-xl); }
.post-head .post-meta { margin-top: var(--space-3xl); }

/* Texto largo: ancho de lectura cómodo */
.prose { max-width: var(--measure-text); font-size: var(--text-article); line-height: var(--leading-article); }
.prose > * { margin: 0 0 var(--space-3xl); }
.prose h2 { margin: var(--space-5xl) 0 var(--space-xl); font-size: var(--text-section); font-weight: var(--weight-bold); line-height: var(--leading-story); }
.prose h3 { margin: var(--space-4xl) 0 var(--space-md); font-size: var(--text-article-h3); font-weight: var(--weight-bold); line-height: var(--leading-story); }
.prose a, .footnotes a, .note a {
  color: inherit;
  text-decoration: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--border-ink); text-underline-offset: var(--underline-offset);
  transition: color var(--dur-fast) var(--ease);
}
.prose a:hover, .footnotes a:hover, .note a:hover { color: var(--color-accent); }
.prose strong { font-weight: var(--weight-bold); }
.prose mark { background: none; color: var(--color-accent); }
.prose ul, .prose ol { padding-left: var(--space-3xl); }
.prose li { margin-bottom: var(--space-xs); }
.prose li::marker { color: var(--color-text-soft); }
.prose code {
  padding: 0.1em 0.35em; font-family: var(--font-mono); font-size: 0.92em;
  background: var(--color-wash); border-radius: var(--radius-track);
}
.prose pre {
  overflow-x: auto; padding: var(--space-xl) var(--space-3xl);
  background: var(--color-wash); border-left: var(--border-strong) solid var(--color-ink);
  font-size: var(--text-base); line-height: var(--leading-loose);
}
.prose pre code { padding: 0; background: none; border-radius: 0; font-size: inherit; }
.prose hr { margin: var(--space-5xl) 0; border: 0; border-top: var(--border-hair) solid var(--color-rule); }

blockquote {
  margin-left: 0; padding-left: var(--space-3xl);
  border-left: var(--border-strong) solid var(--color-ink);
}
blockquote p { margin: 0 0 var(--space-md); font-style: italic; }
blockquote cite { font-size: var(--text-sm); font-style: normal; color: var(--color-text-soft); }

.pull {
  margin: var(--space-5xl) 0;
  font-family: var(--font-heavy); font-size: var(--text-section); line-height: var(--leading-story);
}

/* Cifras destacadas */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--stat-min), 1fr)); gap: var(--space-3xl); padding: var(--space-3xl) 0; border-block: var(--border-hair) solid var(--color-rule); }
.stat .num { display: block; font-family: var(--font-heavy); font-size: var(--text-number); line-height: var(--leading-none); font-variant-numeric: tabular-nums; }
.stat .num.accent { color: var(--color-accent); }
.stat .label { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-soft); }

/* Imágenes */
figure { margin: 0 0 var(--space-3xl); }
figure img { display: block; width: 100%; height: auto; border: var(--border-hair) solid var(--color-rule); }
figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-soft); }
figure.wide { margin-bottom: var(--space-5xl); }
.figure-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); max-width: none; }
.figure-row figure { margin: 0; }

/* Tablas */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
caption { margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-soft); text-align: left; }
th, td { padding: var(--space-xs) var(--space-md); border-bottom: var(--border-hair) solid var(--color-rule); text-align: left; }
th { font-weight: var(--weight-bold); border-bottom: var(--border-ink) solid var(--color-ink); }
tbody tr:hover { background: var(--color-wash); }
.n { text-align: right; }

/* Nota al margen */
.note { padding: var(--space-xl) var(--space-3xl); background: var(--color-wash); font-size: var(--text-base); }
.note p { margin: 0; }

/* Notas al pie */
.fn a { padding: 0 0.15em; text-decoration: none; color: var(--color-accent); font-size: var(--text-sm); }
.footnotes {
  max-width: var(--measure-text); margin-top: var(--space-5xl); padding-top: var(--space-xl);
  border-top: var(--border-hair) solid var(--color-rule);
  font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--color-text-soft);
}
.footnotes ol { margin: 0; padding-left: var(--space-3xl); }
.footnotes li { margin-bottom: var(--space-xs); word-break: break-word; }
.footnotes li:target { color: var(--color-text); }

/* Anterior / siguiente */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-top: var(--space-5xl); }
.post-nav a {
  display: block; padding: var(--space-xl);
  border: var(--border-hair) solid var(--color-rule);
  color: inherit; text-decoration: none; font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-story);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.post-nav a span { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-soft); }
.post-nav .next { text-align: right; }
.post-nav a:hover { border-color: var(--color-ink); color: var(--color-accent); }


/* ---------- Móvil ---------- */
@media (max-width: 600px) {
  .page { padding: calc(var(--nav-h-mobile) + var(--space-4xl)) var(--gutter-mobile) var(--space-5xl); }
  /* en el móvil los temas pasan a dos líneas, así se ven todos sin deslizar de lado;
     y no se quedan fijos arriba, para no ocupar media pantalla al leer */
  .filters { position: static; flex-wrap: wrap; overflow-x: visible; }
  .read-progress { top: var(--nav-h-mobile); }
  .figure-row, .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }
}