/* Done by Default - Blog page-scoped styles (Industrial Spec Sheet).
   Covers the blog index (register of posts) + the long-form post article.
   Reuses css/redesign/* tokens + components. Never edits shared CSS. */

/* ---- Shared page hero (matches the other pages) ---- */
.page-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: var(--space-sm);
  max-width: 16ch;
}
.page-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  max-width: 62ch;
}

/* ---- Blog index: a register of posts ---- */
.bloglist {
  border-top: 1px solid var(--color-border);
}
.blogcard {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  transition: padding-left 0.15s ease, background 0.15s ease;
}
.blogcard:hover,
.blogcard:focus-visible {
  padding-left: var(--space-md);
  background: var(--color-bg-alt, #e8e4d9);
  outline: none;
}
.blogcard__meta {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.blogcard__no { color: var(--color-secondary); font-weight: 700; }
.blogcard__date { color: var(--color-text-muted); }
.blogcard__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-xs);
  max-width: 34ch;
}
.blogcard__desc {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  max-width: 62ch;
}
.blogcard__more {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 700;
}

/* ---- Post article: long-form, Chivo body, readable measure ---- */
.post {
  padding-block: var(--space-2xl) var(--space-xl);
  max-width: 44rem;
  margin-inline: auto;
}
.post__eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-lg);
}
.post__eyebrow a { color: var(--color-secondary); text-decoration: none; }
.post__eyebrow a:hover { text-decoration: underline; }
.post__head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.post__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.post__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: var(--space-md) 0 0;
}

/* long-form body */
.post__body {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text);
}
.post__body > * + * { margin-top: var(--space-md); }
.post__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: var(--space-xl);
  padding-top: var(--space-xs);
}
.post__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  margin-top: var(--space-lg);
}
.post__body a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post__body strong { color: var(--color-dark); font-weight: 700; }
.post__body ul,
.post__body ol { padding-left: 1.4rem; }
.post__body li { margin-top: var(--space-xs); }
.post__body li::marker { color: var(--color-secondary); }
.post__body blockquote {
  border-left: 2px solid var(--color-accent-cta);
  padding-left: var(--space-md);
  margin-inline: 0;
  color: var(--color-text-muted);
  font-style: italic;
}
.post__body code {
  font-family: var(--font-accent);
  font-size: 0.92em;
  background: var(--color-bg-alt, #e8e4d9);
  padding: 0.1em 0.35em;
  border: 1px solid var(--color-border);
}
.post__body img { max-width: 100%; height: auto; border: 1px solid var(--color-border); }

.post__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}