/*
  Bystanek blog — page layout on top of the design-system tokens.
  Classical structure, natural palette: centered, generous whitespace, hairline
  borders over shadows, one accent (Sea). Deep-dark is the default ground.
*/

*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Shared reading column ---- */
.wrap {
  max-width: var(--max-width-reading);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---- Site header ---- */
.site-header {
  border-bottom: var(--border-width) solid var(--color-border);
}
.site-header__inner {
  max-width: var(--max-width-reading);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.wordmark {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.wordmark:hover { text-decoration: none; }
.site-nav {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
}
.site-nav a { color: var(--color-text-muted); }
.site-nav a:hover { color: var(--color-accent); text-decoration: none; }

/* ---- Intro / about blurb ---- */
.intro {
  padding: var(--space-8) 0 var(--space-6);
  text-align: center;
}
.intro h1 {
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-3);
}
.intro__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 40ch;
  margin: 0 auto;
}
/* one flourish per section: a thin centered rule */
.ornament {
  width: 64px;
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin: var(--space-5) auto 0;
}

/* ---- Post list ---- */
.posts {
  padding-bottom: var(--space-8);
  list-style: none;
  margin: 0;
}
.post-item {
  padding: var(--space-5) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.post-item:first-child { border-top: var(--border-width) solid var(--color-border); }
.post-item__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
}
.post-item__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}
.post-item__title a { color: var(--color-text); }
.post-item__title a:hover { color: var(--color-accent); text-decoration: none; }
.post-item__excerpt {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-relaxed);
}
.post-item__more {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.post-item__more::after { content: " →"; }
.post-item__more:hover { text-decoration: none; }

/* tag / badge — the only pill radius in the system */
.tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text);
  background: var(--color-accent-fill);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  letter-spacing: 0.02em;
}

/* ---- Article (post page) ---- */
.article {
  padding: var(--space-7) 0 var(--space-8);
}
.article__header { text-align: center; margin-bottom: var(--space-6); }
.article__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}
.article h1 {
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-3);
  max-width: 24ch;
}
.article__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 46ch;
  margin: 0 auto;
}
.article__body { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.article__body > * + * { margin-top: var(--space-4); }
.article__body h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-6);
  margin-bottom: 0;
}
.article__body h3 { font-size: var(--text-xl); margin-top: var(--space-5); }
.article__body p { margin: 0; }
.article__body blockquote {
  margin: var(--space-5) 0;
  padding: 0 var(--space-4);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: var(--leading-normal);
}
.article__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}
.article__body pre {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.article__body pre code { background: none; border: 0; padding: 0; }

.back-link {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-5);
}
.back-link::before { content: "← "; }
.back-link:hover { text-decoration: none; }

/* ---- Footer ---- */
.site-footer {
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-accent); text-decoration: none; }

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .intro { padding: var(--space-6) 0 var(--space-5); }
  .intro h1 { font-size: var(--text-2xl); }
  .post-item__title { font-size: var(--text-xl); }
  .article { padding: var(--space-6) 0 var(--space-7); }
  .article h1 { font-size: var(--text-2xl); }
  .site-header__inner { padding: var(--space-3) var(--space-4); }
}