.post {
  /* --flow-space: var(--space-s-m); */
  /* --wrapper-max-width: 55rem; */
  margin-block-start: 1em;
}

.post p {
  font-size: var(--step-1);
}

.post a {
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .15em;
  text-decoration-color: var(--color-secondary-1);
}

.post :is(h2, h3, h4) + * {
  --flow-space: var(--space-s-m);
}

/* .post p.higlight {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.36;
} */

/* .post p:first-of-type::first-letter {
  font-size: var(--step-6);
  float: left;
  line-height: 1.5;
  font-style: noirmal;
  font-weight: 900;
  font-feature-settings: "smcp", "swsh" 2;
  margin-block-start: 0;
  margin-block-end: -0.3rem;
  margin-inline-start: 0;
  margin-inline-end: 0;
} */

.post ol {
  font-size: var(--step-1);
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 0 0 0 1em;
}

.post ol li p {
  margin-top: 1em;
  color: var(--color-neutral-2);
}

.post ol li p strong {
  color: var(--color-neutral-1);
}

.post button {
  display: flex;
  justify-content: center;
  max-width: 10rem;
  padding: .3em .5em;
  border-radius: 2px;
  border: 1px solid var(--color-neutral-6);
  background-color: var(--color-neutral-8);
  cursor: pointer;
}

dialog::backdrop {
  background-color: color(display-p3 1 0 0 / .33);
}

.post blockquote {
  border-inline-start: 10px solid var(--color-secondary);
  padding: 0 var(--space-m);
  /* font-family: var(--font-serif); */
  /* font-style: italic; */
  /* font-size: var(--step-2); */
  border-left: 7px solid var(--color-secondary-1);
  background: var(--color-neutral-8);
}

.post blockquote p {
  padding: 1em 0;
  /* font-size: var(--step-2); */
}

.post blockquote > * + * {
  margin-top: var(--space-m-l);
}

/* .post blockquote :last-child {
  font-family: var(--font-base);
  font-style: normal;
  font-size: var(--step-1);
} */

.post > pre {
  border-radius: var(--space-xs);
  outline: var(--space-2xs) solid var(--color-neutral-8);
  font-family: var(--font-monospace);
  line-height: 1;
  overflow-x: scroll;
  overflow-y: hidden;
}

.post > pre code {
  font-family: var(--font-monospace);
  font-size: var(--step--1);
  line-height: 1.2;
}

.post ul code,
.post ol code,
.summary p code,
.post p code {
  color: var(--color-neutral-1);
  background-color: var(--color-neutral-8);
  padding: 3px 5px;
  font-size: var(--step-0);
  border: 1px solid var(--color-neutral-5);
  border-radius: 2px;
}

.summary .summary-date {
  margin: 0;
  /* font-family: var(--font-serif); */
  color: var(--color-neutral-2);
}

.post img {
  width: 100%;
  /* max-height: 40ch; */
  /* aspect-ratio: var(--ratio-landscape); */
  object-fit: cover;
  object-position: center 40%;
}

.post figure {
  /* max-width: 50ch; */
}

.post figure:has(figcaption) {
  background: var(--color8);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.post .figure {
  background: var(--color-neutral-7);
  padding: 2rem;
  /* max-width: 50ch; */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.post figure figcaption {
  color: var(--color1);
}

.post .highlight {
  margin: var(--space-s) 0 0 0;
  /* border: 1px solid red; */
  /* border-radius: 5px; */
  /* padding: 5px; */
}

.post .publish-date {
  font-size: var(--step-1);
  color: var(--color-dark-neutral-4);
}

/* .post .intro {
  font-size: var(--step-2);
  line-height: 1.36;
} */