/* Blog: the index of posts and the article page itself.
   Loaded after site.css, which supplies the tokens, header, footer and type.
   Only what the blog adds lives here, so the 44KB of site chrome is not
   duplicated and the pages stay visibly part of the same site. */

/* ---- shared: the page head on both blog views ---- */
.blog-hero {
  padding: calc(var(--header-h) + var(--space-12)) 0 var(--space-12);
  border-bottom: var(--stroke-hairline) solid var(--line);
}
.blog-kicker {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-4);
}
.blog-hero h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.04; letter-spacing: -.02em; margin: 0;
  max-width: 18ch;
}
.blog-hero .lede {
  margin: var(--space-6) 0 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6; color: var(--ink-muted);
}

/* ---- the index: one card per post ---- */
.post-grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  padding: var(--space-16) 0 var(--space-24);
}
.post-card {
  display: flex; flex-direction: column;
  border: var(--stroke-hairline) solid var(--line);
  background: var(--paper);
  transition: border-color .2s ease-out, transform .2s ease-out;
}
.post-card:hover { border-color: var(--ink); transform: translateY(-2px); }
/* A lone post would otherwise sit in one column of three, looking like the
   page failed to load the rest. On its own it runs wide instead, image beside
   the text; as soon as a second post exists the grid takes over again. */
.post-card:only-child {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
}
.post-card:only-child > a { display: block; height: 100%; }
.post-card:only-child .post-card__img {
  height: 100%; aspect-ratio: auto;
  border-bottom: 0; border-right: var(--stroke-hairline) solid var(--line);
}
.post-card:only-child .post-card__body { padding: var(--space-12); justify-content: center; }
.post-card:only-child .post-card__title { font-size: clamp(26px, 2.6vw, 34px); }
.post-card:only-child .post-card__desc { font-size: 16px; max-width: 46ch; }
/* The preview image carries its own aspect ratio from the width/height on the
   tag; this keeps the crop identical whatever the source happens to be. */
.post-card__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: var(--stroke-hairline) solid var(--line);
}
.post-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.post-card__meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--space-3);
}
.post-card__title {
  font-size: 23px; line-height: 1.22; letter-spacing: -.01em;
  margin: 0 0 var(--space-3);
}
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--signal-deep); }
.post-card__desc {
  margin: 0 0 var(--space-6); color: var(--ink-muted);
  font-size: 15px; line-height: 1.6;
}
.post-card__more {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: var(--stroke-mark) solid var(--signal);
  padding-bottom: 2px;
}
.post-card__more:hover { color: var(--signal-deep); }
.post-card__more::after { content: " \2192"; }

/* ---- the article ---- */
.article { padding: var(--space-16) 0 var(--space-24); }
/* 68 characters is about the width a line of body copy stays comfortable at;
   wider and the eye loses the return sweep between lines. */
.article__body { max-width: 68ch; margin: 0 auto; }
.article__body > * { margin: 0 0 var(--space-6); }
.article__body p { font-size: 17px; line-height: 1.72; }
.article__body h2 {
  font-size: clamp(25px, 3vw, 33px); line-height: 1.16; letter-spacing: -.015em;
  margin: var(--space-16) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--line);
}
.article__body h3 {
  font-size: 20px; line-height: 1.3;
  margin: var(--space-12) 0 var(--space-3);
}
.article__body ul, .article__body ol { padding-left: 1.3em; }
.article__body li { font-size: 17px; line-height: 1.68; margin-bottom: var(--space-3); }
.article__body li::marker { color: var(--accent-text); }
.article__body a { color: var(--signal-deep); text-underline-offset: 3px; }
.article__body strong { font-weight: 600; }

/* The numbered steps. The number is the landmark a skimmer navigates by, so it
   is set large in mono and hung outside the text rather than inline with it. */
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; }
.step__n {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--on-signal); background: var(--signal);
  width: 34px; height: 34px; display: grid; place-items: center;
  margin-top: 4px;
}
.step__t { margin: 0 0 var(--space-2); font-size: 21px; line-height: 1.28; letter-spacing: -.01em; }
.step > div > p:last-child, .step > div > ul:last-child { margin-bottom: 0; }

/* A pulled-out claim, for the one or two lines worth stopping on. */
.pull {
  border-left: var(--stroke-mark) solid var(--signal);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.38;
  color: var(--ink);
}

/* The spec box, for the numbers people arrive looking for. */
.spec {
  border: var(--stroke-hairline) solid var(--line);
  background: var(--bone);
  padding: var(--space-6);
}
.spec h3 { margin-top: 0; }
.spec dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-6); }
.spec dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
           text-transform: uppercase; color: var(--ink-muted); padding-top: 3px; }
.spec dd { margin: 0; font-size: 16px; line-height: 1.5; }

/* An example thumbnail with its explanation underneath. */
.shot { margin: var(--space-12) 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: var(--stroke-hairline) solid var(--line);
}
.shot figcaption {
  margin-top: var(--space-3); font-size: 14px; line-height: 1.6;
  color: var(--ink-muted);
}
/* Wider than the reading column: these are the evidence, and the point is
   partly that they survive being looked at. */
@media (min-width: 900px) {
  .shot { width: 118%; margin-left: -9%; }
  /* The lead image sits outside the reading column already, so it takes the
     full width of the page frame instead of overhanging it. */
  .shot--lead { width: 100%; margin-left: 0; }
}

/* The closing call to action. */
.article-cta {
  border: var(--stroke-mark) solid var(--ink);
  padding: var(--space-12);
  margin-top: var(--space-16);
  text-align: center;
}
.article-cta h2 { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.article-cta p { margin: 0 auto var(--space-8); max-width: 46ch; color: var(--ink-muted); }

@media (max-width: 760px) {
  .blog-hero { padding: calc(var(--header-h) + var(--space-8)) 0 var(--space-8); }
  .blog-hero h1 { max-width: none; }
  .post-grid { grid-template-columns: 1fr; padding: var(--space-12) 0 var(--space-16); }
  /* Stack the featured card back up on a phone. */
  .post-card:only-child { grid-template-columns: 1fr; }
  .post-card:only-child .post-card__img {
    aspect-ratio: 4 / 3; height: auto;
    border-right: 0; border-bottom: var(--stroke-hairline) solid var(--line);
  }
  .post-card:only-child .post-card__body { padding: var(--space-6); }
  .article { padding: var(--space-12) 0 var(--space-16); }
  .step { grid-template-columns: 1fr; gap: var(--space-3); }
  .spec dl { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .spec dd { margin-bottom: var(--space-3); }
  .article-cta { padding: var(--space-8) var(--space-6); }
}