/* Post: a blog post on its own page — the way back, its date and reading
   time, the title large, a lead, the picture and the text at a reading width */
.post {
  display: grid;
  gap: var(--space-m-l);
  justify-items: center;
}

.post__header {
  --flow-space: var(--space-s);

  max-inline-size: var(--column-content);
  inline-size: 100%;
}

.post__meta {
  color: var(--color-muted);
  font-size: var(--step--1);
  gap: var(--space-2xs);

  a {
    color: var(--color-accent-text);
  }
}

.post__title {
  font-size: calc(var(--step-5) * var(--display-scale, 1));
  line-height: var(--leading-flat);
  text-wrap: balance;
}

.post__lead {
  color: var(--color-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.post__picture {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  inline-size: 100%;
  object-fit: cover;
}

.post__body {
  inline-size: 100%;
  max-inline-size: var(--column-content);
}

/* The style's pictures (data-look-images): mono in black and white, duotone
   in the accent (picture-filters.css) */
[data-look-images="mono"] .post__picture {
  filter: grayscale(1) contrast(1.06);
}

[data-look-images="duotone"] .post__picture {
  filter: contrast(1.1) url(#shop-duotone);
}