/* ═══════════════════════════════════════════════════════════════════════
   content.css: long-form content managed in the CMS
   Loaded by every inner page after pages.css. Covers the article pages
   (/blog/ and /blog/<slug>/) and the optional capability descriptions on
   /capabilities/. Uses only the tokens defined in style.css.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── capability descriptions ────────────────────────────────────────────
   Optional paragraphs under a capability's one-liner. .iy-cap__body itself
   is styled in pages.css; this only spaces consecutive paragraphs. */
.iy-cap__body + .iy-cap__body { margin-top: .9em; }


/* ── the article list (/blog/) and the homepage "all articles" link ───── */
.iy-posts__all { margin: clamp(1.8rem, 4vh, 2.6rem) 0 0; text-align: center; }
.iy-posts__all .iy-post__link { align-self: auto; }
.iy-articles__empty {
  margin: 0;
  font-size: var(--fs-lead);
  color: var(--iy-fg-soft);
}


/* ── a single article (/blog/<slug>/) ──────────────────────────────────
   The reading column sits under the page heading, left-aligned with it. On
   wide screens a narrow side column carries the date, the way back to the
   list and the enquiry prompt, so the page reads as composed rather than as
   a text column with half the screen left empty. */
.iy-article {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.iy-article__aside {
  position: sticky;
  top: calc(var(--nav-h-c) + 2rem);
  max-width: 22rem;
  justify-self: end;
  width: 100%;
}

.iy-article__card {
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--iy-bg-raised);
  border: 1px solid var(--iy-rule);
  border-top: 2px solid var(--iy-mark);
}
.iy-article__card .iy-post__date { margin-bottom: 1.1rem; }
.iy-article__card-h {
  margin: 0 0 .6rem;
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-card);
  letter-spacing: -.012em; line-height: 1.2;
  color: var(--iy-fg);
}
.iy-article__card-p {
  margin: 0 0 1.3rem;
  font-size: var(--fs-small); line-height: 1.55;
  color: var(--iy-fg-soft);
}
.iy-article__rule {
  height: 1px; border: 0; margin: 1.4rem 0;
  background: var(--iy-rule);
}

.iy-article__figure { margin: 0 0 clamp(1.8rem, 4vh, 2.6rem); }
.iy-article__figure img { display: block; width: 100%; height: auto; }

/* The body is Markdown rendered to HTML. .iy-prose (pages.css) sets the
   paragraphs; these rules cover everything else an editor can produce. */
.iy-article__body h2,
.iy-article__body h3,
.iy-article__body h4 {
  margin: 2.2em 0 .7em;
  font-family: var(--display); font-weight: 800;
  letter-spacing: -.012em; line-height: 1.2;
  color: var(--iy-fg);
  text-wrap: balance;
}
.iy-article__body h2 { font-size: var(--fs-card); }
.iy-article__body h3,
.iy-article__body h4 { font-size: var(--fs-lead); }
.iy-article__body > :first-child { margin-top: 0; }

.iy-article__body ul,
.iy-article__body ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--iy-fg-soft);
}
/* The base stylesheet removes list markers site-wide (the nav and footer are
   lists), so an article's lists have to ask for theirs back explicitly. */
.iy-article__body ul { list-style: disc outside; }
.iy-article__body ol { list-style: decimal outside; }
.iy-article__body li { margin: 0 0 .6em; padding-left: .3em; }
.iy-article__body li::marker { color: var(--iy-fg-accent); }
.iy-article__body ol li::marker { font-family: var(--display); font-weight: 500; }

.iy-article__body strong { font-weight: 600; color: var(--iy-fg); }
.iy-article__body a {
  color: var(--iy-fg-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.iy-article__body a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.iy-article__body blockquote {
  margin: 1.8em 0;
  padding-left: clamp(1.1rem, 3vw, 2rem);
  border-left: 2px solid var(--iy-mark);
}
.iy-article__body blockquote p { color: var(--iy-fg); }

.iy-article__body img { display: block; max-width: 100%; height: auto; margin: 1.8em 0; }
.iy-article__body hr { height: 1px; border: 0; margin: 2.4em 0; background: var(--iy-rule); }

@media (max-width: 1150px) {
  .iy-article { grid-template-columns: minmax(0, 1fr); }
  .iy-article__aside { position: static; justify-self: stretch; max-width: 68ch; }
}