/* blog.css — styles specific to blog.appliedvibe.ai.
   NOT a shared asset: it lives only here and is not copied to other apps.
   Tokens only; no literal colours, sizes or spacing. */

.masthead {
  font: var(--av-meta-font);
  letter-spacing: var(--av-meta-tracking);
  text-transform: uppercase;
  margin-block-end: var(--av-space-xl);
}

.masthead a {
  color: var(--av-color-secondary);
  text-decoration: none;
}

.masthead a:hover {
  color: var(--av-color-primary);
}

/* Post list. Plain rows — the overprint belongs to the archive, and it is
   used once per page. */
.entries {
  list-style: none;
  padding: 0;
  margin-block: var(--av-space-lg);
}

.entries li {
  list-style: none;
  padding-block: var(--av-space-md);
  border-block-end: 1px solid var(--av-color-secondary);
}

/* An entry title is subordinate to the section head above it, so it cannot
   also be display-md. DESIGN.md forbids Bricolage below 2rem, which leaves
   Literata bold — the same treatment the specimen rows use. */
.entries a {
  font-family: var(--av-font-body-md-family);
  font-size: var(--av-font-body-md-size);
  font-weight: 700;
  line-height: var(--av-font-body-md-leading);
  color: var(--av-color-primary);
  text-decoration: none;
}

.entries a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.entries p {
  margin-block: var(--av-space-xs) 0;
}

/* The accession label sits outside the text column where the measure allows,
   and folds back inline on narrow screens. */
.specimen .accession {
  display: flex;
  align-items: baseline;
  gap: var(--av-space-sm);
  flex-wrap: wrap;
  margin-block-end: var(--av-space-xs);
}

.specimen h3 {
  font-size: var(--av-font-body-md-size);
  font-family: var(--av-font-body-md-family);
  font-weight: 700;
  line-height: var(--av-font-body-md-leading);
  letter-spacing: normal;
  margin-block: 0 var(--av-space-xs);
}

.specimen h3 a {
  color: var(--av-color-primary);
  text-decoration: none;
}

.specimen p:last-child {
  margin-block-end: 0;
}

.empty {
  color: var(--av-color-secondary);
  border-block: 1px solid var(--av-color-secondary);
  padding-block: var(--av-space-lg);
}

.colophon {
  margin-block-start: var(--av-space-xl);
  padding-block-start: var(--av-space-md);
  border-block-start: 1px solid var(--av-color-secondary);
}

.colophon p {
  margin-block: 0 var(--av-space-xs);
}

.colophon a {
  color: var(--av-color-secondary);
}

/* A post's <article> is the page content, not a card. base.css already
   removes Pico's fill and shadow; this drops the padding that would otherwise
   inset the text from the measure. */
article {
  padding: 0;
  margin-block-end: 0;
}

/* Post body: the measure is already set by base.css on <main>. */
.post-meta {
  margin-block-end: var(--av-space-lg);
}

article :is(h2, h3) {
  margin-block-start: var(--av-space-lg);
}

article pre {
  border: 1px solid var(--av-color-secondary);
  border-radius: var(--av-code-block-rounded);
  padding: var(--av-code-block-padding);
  overflow-x: auto;
}

article blockquote {
  border-inline-start: 2px solid var(--av-color-secondary);
  padding-inline-start: var(--av-space-md);
  margin-inline: 0;
}