/* Styling for the generated blog pages (blog/*.html).
   Inherits design tokens, nav, footer, and buttons from colors_and_type.css
   and site.css; this file only lays out the post body and the index list.
   Mirrors docs.css, minus the sidebar rail — a post is a single column. */

.blog {
  /* Single source of truth for the reading column. Both used to say 68ch, which
     silently disagreed: `ch` resolves against each element's own font-size, so
     the index sat 22px narrower than the heading directly above it. */
  --blog-col: 707px;
  padding: 56px 0 88px;
  min-height: 60vh;
}

.blog-wrap,
.blog-wrap-index { display: block; }

/* ── Post body ─────────────────────────────────────────────────────────── */
.blog-post {
  max-width: var(--blog-col);
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--warm-800);
}

.blog-post h1 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 8px;
  color: var(--foreground);
}
/* No rule above every h2: five of them in one article reads as a stack of
   dividers rather than structure. Size and space carry the hierarchy; a rule is
   authored deliberately with `---` where a section genuinely turns. */
.blog-post h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 54px 0 14px;
  color: var(--foreground);
  scroll-margin-top: 88px;
}

.blog-post hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 54px 0 0;
}
.blog-post h3 {
  font-size: 17.5px;
  font-weight: 600;
  margin: 32px 0 10px;
  color: var(--foreground);
  scroll-margin-top: 88px;
}

.blog-post p { margin: 0 0 18px; }
.blog-post strong { color: var(--foreground); font-weight: 700; }
.blog-post ul, .blog-post ol { margin: 0 0 18px; padding-left: 22px; }
.blog-post li { margin: 0 0 10px; }
.blog-post a { color: var(--peach-text); text-decoration: underline; text-underline-offset: 2px; }
.blog-post a:hover { color: var(--foreground); }

/* Byline runs above the title as a kicker: the markdown file owns the <h1>, so
   the generator emits this line before it rather than reaching into the
   rendered HTML to inject it underneath. */
.blog-meta {
  font-size: 14px;
  color: var(--warm-500);
  margin: 0 0 22px;
}

.blog-back {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}

/* ── Index ─────────────────────────────────────────────────────────────── */
.blog-index-intro { margin-bottom: 8px; }

/* Feed link sits with the intro rather than after the list, where it read as a
   second footer stacked on top of the real one. */
.blog-subscribe { margin: 0 0 26px; font-size: 15px; }

.blog-index {
  list-style: none;
  max-width: var(--blog-col);
  margin: 0 auto;
  padding: 0;
}
.blog-index li { margin: 0 0 14px; }
.blog-index a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-card-text { padding: 20px 22px; }

/* Banner: the post's own screenshot in a miniature window frame, cropped from
   the top over a brand gradient. Fixed height so every card is the same size
   whatever the screenshot's aspect ratio. */
.blog-card-banner {
  height: 190px;
  padding: 22px 22px 0;
  background: var(--gradient-shot);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.blog-card-banner .window {
  height: 100%;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.blog-card-banner .window-bar { padding: 9px 13px; }
.blog-card-banner .window-dots i { width: 8px; height: 8px; }
.blog-card-banner .window-url { height: 21px; font-size: 11px; max-width: 240px; }
.blog-card-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
@media (max-width: 560px) {
  .blog-card-banner { height: 140px; padding: 16px 16px 0; }
}
.blog-index a:hover {
  border-color: var(--peach);
  transform: translateY(-1px);
}
.blog-index time {
  display: block;
  font-size: 13px;
  color: var(--warm-500);
  margin-bottom: 6px;
}
.blog-index strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin-bottom: 6px;
  line-height: 1.25;
}
.blog-index span {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--warm-700);
}

/* ── Screenshots ───────────────────────────────────────────────────────── */
/* Figures break out wider than the 68ch prose column so UI detail stays
   readable, but stay inside the page wrap. The frame itself is the .window
   component from site.css, which every generated page already loads. */
.blog-shot {
  margin: 36px auto 40px;
  max-width: min(1000px, 100%);
}
/* Same treatment as the landing page product stage: a gradient ground with no
   bottom padding, so the window runs off the bottom edge instead of sitting in
   a closed box. The frame is a separate element from the figure so the clip
   applies to the screenshot without swallowing the figcaption below it. */
.blog-shot-frame {
  padding: 22px 22px 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--gradient-shot);
  border: 1px solid var(--peach-light);
}
.blog-shot .window {
  background: var(--warm-50);
  /* Percentage so the clip scales with the frame: vertical margins resolve
     against the container width, so this stays proportional on a phone. */
  margin-bottom: -9.5%;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* A different ground per figure, cycling through the same palette rotation the
   how-it-works steps use. */
.blog-shot:nth-of-type(3n + 2) .blog-shot-frame {
  background: var(--gradient-mist);
  border-color: var(--lavender-light);
}
.blog-shot:nth-of-type(3n + 3) .blog-shot-frame {
  background: linear-gradient(135deg, var(--sage-subtle) 0%, var(--peach-subtle) 100%);
  border-color: var(--sage-light);
}
/* width/height rather than object-fit, so a screenshot can only ever lose
   height off the bottom, never content at its sides. */
.blog-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.blog-shot figcaption {
  margin: 14px 4px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--warm-600);
}
@media (min-width: 1080px) {
  /* Break out of the prose column. `max-width` has to be released as well as
     `width` set: the base rule caps the figure at 100% of the 68ch article, and
     max-width beats width, so without this the figure shifts left without ever
     getting wider. */
  .blog-shot {
    width: 1000px;
    max-width: none;
    margin-left: calc((var(--blog-col) - 1000px) / 2);
  }
}
@media (max-width: 1079px) {
  .blog-shot { margin-left: auto; margin-right: auto; }
}