/* Blog post and post index.

   Unlike the marketing pages, the Wix blog does NOT scale with the viewport: h1 was 40px
   and body 18px at 1920, 834 and 390 alike, and only the column width changed. So this
   file uses px on purpose, and it is the one page whose type is a reading measure rather
   than a design grid.

   The layout is one template, src/templates/post.html, so every post published from here
   on gets this and nothing has to be styled per article. */

.post-page { background: var(--paper); }

/* ------------------------------------------------------------------ the article */

/* Two measures, and every block picks one.

   `--measure` is 68ch, about 700px at this size, which is what long-form prose wants and
   is the only reason this page has a width at all. `--plate` is the picture. The title
   block takes the plate rather than the measure so its left edge lines up with the top of
   the photograph beneath it: at the narrower width the heading sat in a column inset from
   the image and read as though it belonged to something else. */
.post {
  padding: 0 1.25rem;
  --measure: 700px;
  --plate: 1040px;
}

.post__body,
.post__foot {
  max-width: var(--measure);
  margin-inline: auto;
}

.post__head {
  max-width: var(--plate);
  margin-inline: auto;
  padding-top: 72px;
}

/* A quiet way back. It used to be a black pill floating alone above the article, which
   competed with the title for the first thing the eye lands on. */
.post__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c5c5c;
}
.post__back::before { content: '\2190'; }
.post__back:hover { color: var(--ink); }

.post__title {
  margin-top: 28px;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e0ddd9;
  font-size: 15px;
  color: #5c5c5c;
}

/* Wider than the measure on purpose: the picture is the break between the title block
   and the prose, and at the text width it would read as just another inline image. */
.post__hero {
  max-width: var(--plate);
  margin: 40px auto 0;
}
.post__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

/* ---------------------------------------------------------------------- the prose */

.post__body {
  margin-top: 48px;
  font-size: 19px;
  line-height: 1.75;
  color: #1c1c1c;
}
.post__body > * + * { margin-top: 1.35em; }

/* The opening paragraph carries the weight a standfirst would, without asking anybody
   to write one: every post already has a first paragraph. */
.post__body > p:first-child {
  font-size: 22px;
  line-height: 1.6;
  color: var(--ink);
}

.post__body h2 {
  margin-top: 2em;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.post__body h3 { margin-top: 1.8em; font-size: 23px; line-height: 1.3; }
.post__body h2 + *, .post__body h3 + * { margin-top: 0.7em; }

.post__body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.post__body a:hover { color: #5c5c5c; }

.post__body ul,
.post__body ol { padding-left: 1.3em; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li + li { margin-top: 0.5em; }
.post__body li::marker { color: #9a948b; }

.post__body strong { font-weight: 700; }

.post__body blockquote {
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--lime);
  font-size: 21px;
  line-height: 1.6;
  color: #333;
}

.post__body img { width: 100%; border-radius: 8px; }

/* Wix renders a run of images as a 3-up gallery of squares rather than stacked
   full-width shots. Markdown gives us a <ul> of images, so match that layout here, and
   let it break the measure since a grid of squares at 700px is cramped. */
.post__body ul:has(> li > img:only-child) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-left: 0;
  list-style: none;
  /* Breaks the reading measure out to the hero's width. Three squares inside 700px are
     thumbnails; the pictures are the point of these runs. */
  width: min(1040px, calc(100vw - 2.5rem));
  margin-left: 50%;
  transform: translateX(-50%);
}
.post__body ul:has(> li > img:only-child) li { margin-top: 0; }
.post__body ul:has(> li > img:only-child) img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}
.post__body p:has(> img:only-child) { margin-top: 1.35em; }
.post__body figure { margin-top: 1.35em; }
.post__body figcaption { margin-top: 0.6em; font-size: 15px; color: #5c5c5c; }

.post__foot {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid #e0ddd9;
}

/* ------------------------------------------------------------------ keep reading */

.recent { margin-top: 80px; padding: 64px 1.25rem 80px; background: #fff; }
.recent__inner { max-width: 1040px; margin-inline: auto; }
.recent__heading { font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; }

.recent__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
}

.recent-card {
  background: var(--paper);
  border: 1px solid #e6e3df;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.recent-card:hover { border-color: var(--ink); }
.recent-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.recent-card__body { padding: 20px; }
.recent-card__date { font-size: 13px; color: #5c5c5c; }
.recent-card__title { margin-top: 10px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.recent-card a:hover .recent-card__title { text-decoration: underline; }

/* ------------------------------------------------------------- post index */

.post-index { background: var(--paper); padding: 0 var(--gutter); }
.post-index__inner { max-width: var(--content); margin-inline: auto; padding: 5rem 0 6rem; }
.post-index__title { font-size: var(--fs-display); line-height: var(--lh-display); text-align: center; }
.post-index__lead { margin-top: 1.5rem; font-size: var(--fs-sm); text-align: center; }

.post-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

@media (max-width: 999px) {
  .post__head { padding-top: 48px; }
  .post__title { font-size: 38px; }
  .post__hero { margin-top: 32px; }
  .recent { margin-top: 56px; padding: 48px 1.25rem 56px; }
  .recent__grid,
  .post-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 749px) {
  .post__head { padding-top: 36px; }
  .post__title { font-size: 30px; margin-top: 22px; }
  .post__body { margin-top: 36px; font-size: 18px; }
  .post__body > p:first-child { font-size: 20px; }
  .post__body h2 { font-size: 25px; }
  .post__body h3 { font-size: 21px; }
  .post__hero img { aspect-ratio: 4 / 3; border-radius: 8px; }
  /* Three squares across a phone is a row of thumbnails nobody can see. */
  .post__body ul:has(> li > img:only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent__grid,
  .post-index__grid { grid-template-columns: 1fr; }
}