/* The blog — index and article.
 *
 * Two jobs, and they pull in opposite directions. The index is a shopfront and
 * wants a grid; the article is a thousand words and wants a column. So the
 * index borrows the catalogue's card rhythm, and the article is the only page
 * on the site that narrows `main` to a measure and then deliberately breaks
 * out of it for one element — the illustration — because a scene illustration
 * cropped to 62 characters is a thumbnail, not a picture.
 *
 * Every value is a token. Nothing here introduces a colour.
 */

/* ---- Index ---------------------------------------------------------------- */

.blog-head {
  max-width: var(--measure);
  margin: 0 0 var(--space-2xl);
}

.blog-head h1 { font-size: var(--text-3xl); }

.blog-head__lede {
  margin: var(--space-sm) 0 0;
  color: var(--ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}

.blog-empty {
  color: var(--ink-3);
  font-size: var(--text-md);
}

.post-grid {
  display: grid;
  /* `minmax(0, 1fr)`, never a bare `1fr`: these tracks carry images, and a
     bare `1fr` is `minmax(auto, 1fr)`, which refuses to shrink below the
     image's intrinsic width and pushes the page sideways on a narrow screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-card {
  background: var(--paper-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.post-card:hover,
.post-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* The whole card is the link, so the title, the summary and the date are all
   announced as one destination rather than as a title link with orphaned prose
   beside it. Grid rather than block so the gaps are set once. */
.post-card__link {
  display: grid;
  gap: var(--space-2xs);
  height: 100%;
  padding: 0 0 var(--space-lg);
  color: var(--ink);
  text-decoration: none;
}

.post-card__image {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  /* The scenes put the charm right of centre; biasing the crop keeps it in
     frame when the card is short and wide. */
  object-position: 60% 50%;
  margin-bottom: var(--space-sm);
  background: var(--paper-2);
}

.post-card__kicker,
.article__kicker {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-card__kicker { padding: 0 var(--space-lg); }

.post-card__title {
  padding: 0 var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* A long title breaks inside itself rather than pushing the card sideways. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.post-card__link:hover .post-card__title { color: var(--accent); }

.post-card__summary {
  padding: 0 var(--space-lg);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.post-card__date {
  /* Pushed to the bottom of the card so dates line up across a row whose
     summaries are different lengths. */
  align-self: end;
  margin-top: var(--space-sm);
  padding: 0 var(--space-lg);
  color: var(--ink-3);
  font-size: var(--text-xs);
}

/* ---- Article -------------------------------------------------------------- */

.article {
  max-width: var(--measure);
  margin: 0 auto;
}

.article__back {
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
}

.article__back a {
  /* Its own 44px hit area, without padding that would push the heading down:
     the pseudo-element grows the target, the layout does not move. */
  position: relative;
  display: inline-block;
  color: var(--ink-3);
}

.article__back a::after {
  content: '';
  position: absolute;
  inset: -12px -8px;
}

.article__back a:hover { color: var(--accent); }

.article__head { margin-bottom: var(--space-lg); }

.article__head h1 {
  font-size: var(--text-3xl);
  margin: var(--space-2xs) 0 var(--space-xs);
}

.article__meta {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--text-sm);
}

/* The one element allowed out of the measure. 100cqw is not available here
   (no container), so the breakout is the standard negative-margin trick,
   clamped so it can never exceed the page gutter and cause a horizontal
   scrollbar. */
.article__figure {
  margin: var(--space-xl) 0;
}

.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.article__figure figcaption {
  margin-top: var(--space-xs);
  color: var(--ink-3);
  font-size: var(--text-xs);
  line-height: 1.5;
}

@media (min-width: 60rem) {
  .article__figure {
    /* 1200px capped against the page's own 1200px `main` width, minus its
       gutters, so this never pushes past what the layout already allows. */
    width: min(1100px, calc(100vw - var(--space-2xl) * 2));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.article__body {
  color: var(--ink-2);
  font-size: var(--text-md);
  line-height: 1.7;
}

.article__body h2 {
  margin: var(--space-xl) 0 var(--space-xs);
  color: var(--ink);
  font-size: var(--text-lg);
}

.article__body h3 {
  margin: var(--space-lg) 0 var(--space-2xs);
  color: var(--ink);
}

.article__body p { margin: 0 0 var(--space-md); }

.article__body ul,
.article__body ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.article__body li { margin-bottom: var(--space-xs); }

.article__body strong { color: var(--ink); }

.article__body a {
  color: var(--accent);
  text-decoration-thickness: 1px;
}

.article__body a:hover { color: var(--accent-deep); }

/* ---- The live preview panel ------------------------------------------------
   Deliberately not styled as a banner ad. It sits on the sunken surface, in
   the same card language as the rest of the site, because it is the article's
   last paragraph in another medium rather than an interruption of it. */

.article__try {
  margin: var(--space-2xl) 0;
  padding: var(--space-xl);
  background: var(--paper-2);
  border-radius: var(--radius-lg);
}

.article__try-copy { margin-bottom: var(--space-lg); }

.article__try-copy h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-lg);
}

.article__try-copy p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* `.hero-preview` comes from landing.css, which this page also links. Its
   default is a two-column split sized for a hero; inside a measure-width
   column there is no room for that, so it stacks. */
.article__try .hero-preview {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.article__foot {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}

.article__foot p {
  margin: 0 0 var(--space-md);
  color: var(--ink-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ---- Landing-page teaser ---------------------------------------------------
   The three-up strip under the catalogue. Linked from index.astro, which also
   links landing.css; kept here rather than there so everything that knows what
   a post looks like is in one file. */

/* The strip is a band on the landing page, so it keeps the same rhythm as the
   bands around it. It had no top margin at all, which only showed once a band
   with its own grid (the colour row) was placed above it: the row's labels
   and the "Ideas and guides" heading ended up on adjacent lines. */
.blog-strip {
  margin-top: var(--space-3xl);
}

.blog-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.blog-strip__head h2 { margin: 0; }

.blog-strip__all {
  position: relative;
  font-size: var(--text-sm);
}

.blog-strip__all::after {
  content: '';
  position: absolute;
  inset: -12px -8px;
}