/* ===== Public blog — "Ways to work" (/blog, /blog/<slug>) =====
   Reuses the landing's `lp` chrome (nav/footer/skip-link in components.css);
   this file styles the blog. Monochrome system: white surfaces, thin lines,
   mono metadata, no shadows. Editorial rework (story 100): a featured lead,
   theme-grouped grid, pull-quotes, and varied figure treatments replace the
   old uniform hero→text→one-figure template that read as flat. Loads last in
   the cascade: tokens → base → components → landing-scenes → blog. */

/* ---------------------------------------------------------------- Figures --
   The landing screenshot-ratio contract: a fixed-ratio frame with object-fit
   that shows a real capture whole (no crop, no layout shift), and survives a
   still-missing PNG without collapsing the page. Treatments: default (in the
   text column, cover-cropped from the top so the legible UI shows), --contain
   (whole shot un-cropped), and --wide (bleeds past the measure for heroes and
   the 3D map). */
.blog-figure { margin: var(--space-6) 0; }
.blog-figure__frame {
  aspect-ratio: 16 / 10;
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
.blog-figure__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.blog-figure--contain .blog-figure__img { object-fit: contain; }
.blog-figure__caption {
  display: block; padding: 10px 2px 0; color: var(--muted); text-align: left;
  text-transform: none; letter-spacing: 0; font-size: var(--text-sm); line-height: 1.5;
}
/* Wide figure: break out of the reading measure up to the page gutter so the
   hero and the 3D-map flagships land with weight — never wider than the lp
   container. */
.blog-figure--wide {
  width: min(100vw - 2 * var(--space-5), 1040px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.blog-figure--wide .blog-figure__frame { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------------ Index --
   Header, a featured lead story, then theme-grouped rows of cards. */
.blog-index { padding: 40px 0 80px; }
.blog-index__head { max-width: 720px; margin-bottom: var(--space-7); }
.blog-index__kicker { color: var(--muted); }
.blog-index__title { font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.03em; line-height: 1.03; margin: var(--space-3) 0 var(--space-3); }
.blog-index__lead { color: var(--ink-soft); line-height: 1.6; margin: 0; font-size: var(--text-lg); max-width: 640px; }

/* Featured lead: a big two-column card (image | copy) that collapses to
   image-over-copy when narrow. The one story we lead with. */
.blog-lead {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch;
  border: var(--border) solid var(--line); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit; margin-bottom: var(--space-7);
}
.blog-lead:hover { border-color: var(--ink); }
.blog-lead:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.blog-lead__media { background: var(--surface-2); border-right: var(--border) solid var(--line-soft); overflow: hidden; min-height: 340px; }
.blog-lead__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.blog-lead__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); justify-content: center; }
.blog-lead__tag { color: var(--muted); }
.blog-lead__title { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.blog-lead__teaser { color: var(--ink-soft); line-height: 1.6; margin: 0; }
.blog-lead__more { color: var(--ink); font-size: var(--text-sm); }

/* Theme group: a quiet mono section label over a card row. */
.blog-group { margin-top: var(--space-6); }
.blog-group__label {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  border-bottom: var(--border) solid var(--line-soft); color: var(--muted);
}
.blog-group__count { color: var(--muted-2); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }

.blog-card {
  display: flex; flex-direction: column;
  border: var(--border) solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; text-decoration: none; color: inherit;
}
.blog-card:hover { border-color: var(--ink); }
.blog-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Card image uses a LEGIBLE detail crop (cover/top), not the washed-out
   full-screen overview the old cards showed as grey boxes. */
.blog-card__thumb { aspect-ratio: 16 / 10; background: var(--surface-2); border-bottom: var(--border) solid var(--line-soft); overflow: hidden; }
.blog-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.blog-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.blog-card__tag { color: var(--muted); }
.blog-card__title { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.blog-card__teaser { color: var(--ink-soft); line-height: 1.5; font-size: var(--text-sm); margin: 0; flex: 1; }
.blog-card__meta { color: var(--muted-2); margin-top: var(--space-1); }

/* Index sign-off: Ato resting at the foot of the list, with one quiet line
   that names the through-line all twelve cases share. */
.blog-signoff {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: var(--border) solid var(--line-soft);
}
.blog-signoff__ato { flex: none; width: 72px; height: 54px; image-rendering: pixelated; }
.blog-signoff__line { margin: 0; color: var(--ink-soft); line-height: 1.6; max-width: 560px; }

/* ------------------------------------------------------------------- Post --
   A single reading measure, with figures allowed to bleed wider than the text
   and a large pull-quote to break the grey. */
.blog-post { max-width: 680px; margin: 0 auto; padding: 40px 0 80px; }
.blog-post__head { margin-bottom: var(--space-5); }
.blog-post__backlink { color: var(--muted); text-decoration: none; }
.blog-post__backlink:hover { color: var(--ink); text-decoration: underline; }
.blog-post__tag { display: block; color: var(--muted); margin-top: var(--space-4); }
.blog-post__title { font-size: clamp(30px, 4.5vw, 46px); letter-spacing: -0.02em; line-height: 1.05; margin: var(--space-2) 0 var(--space-3); }
.blog-post__teaser { color: var(--ink-soft); font-size: var(--text-lg); line-height: 1.5; margin: 0; }
.blog-post__meta { display: block; color: var(--muted-2); margin-top: var(--space-3); }
.blog-post__body { margin-top: var(--space-6); }
.blog-post__para { line-height: 1.75; margin: 0 0 var(--space-4); font-size: var(--text-md); }

/* Pull-quote: large, quiet, a hairline on the left. Breaks the column and
   gives each post a visual centre of gravity. */
.blog-pullquote {
  margin: var(--space-7) 0; padding: 2px 0 2px var(--space-5);
  border-left: 2px solid var(--ink);
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
}

/* Feature highlight: Ato (the pixel mascot) points out the special Atomo
   feature a case leans on. Small boxed aside; the sprite renders pixelated at
   an integer cell scale (ato-mascot.md). Distinct from the pull-quote so a post
   reads: prose · a quote to breathe · "here's the feature that made it work". */
.blog-feature {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: var(--space-5) 0; padding: var(--space-3) var(--space-4);
  border: var(--border) solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.blog-feature__ato { flex: none; width: 48px; height: 36px; image-rendering: pixelated; margin-top: 1px; }
.blog-feature__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.blog-feature__label { color: var(--muted-2); }
.blog-feature__name { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--text-md); }
.blog-feature__note { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }

.blog-post__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--border) solid var(--line-soft);
}
.blog-post__foot .blog-post__meta { margin: 0; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 760px) {
  .blog-lead { grid-template-columns: 1fr; }
  .blog-lead__media { border-right: 0; border-bottom: var(--border) solid var(--line-soft); min-height: 0; aspect-ratio: 16 / 10; }
  .blog-index, .blog-post { padding-top: var(--space-5); }
  .blog-figure--wide { width: 100%; margin-left: 0; transform: none; }
  .blog-signoff { flex-wrap: wrap; gap: var(--space-3); }
}