Editorial blog/journal grid built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, lede, view-all link) > a plain list > six "Blog Card" component instances (image + alt, tone-coded category chip, corner arrow, date + read time, title, clamped excerpt, author row). Section-level options are data attributes on the section, not props: data-layout (featured|uniform — featured turns the first card into a 2×2 full-bleed cover at wide widths), data-card (elevated|outline|minimal) and data-align (split|center) on the header. Each card is a component with typed props: image (image), alt, category, tone (select ink|sage|clay|sky, colours the chip), date, dateLabel, readTime, url, title, excerpt, author, role, avatar (image). Grid is 1 -> 2 -> 3 columns via container queries on the container. Cards lift and zoom their image on hover with a title underline and corner arrow; below-the-fold cards fade and rise into place via IntersectionObserver + CSS transitions (no @keyframes), respecting prefers-reduced-motion. Whole card is one accessible link with a visible :focus-visible ring.