/* Hallmark · the blog (owner, 2026-10-11). Structure studied from blog.duolingo.com: editor's pick,
 * topic sections of cards (cover, date, title, no excerpt), posts with a dek, a team byline, a
 * mascot cover, short sections and one call to action at the end. Dressed in JarSave's tokens
 * (site.css): lime, indigo, Nunito, the app's capsules. No newsletter, no author photos, no tags. */

/* Header: the site's, plus the blog's own links. Topic links fold away on phones. */
.blog-nav { display: flex; gap: var(--space-lg); margin-inline: auto var(--space-lg); font: 800 0.95rem/1 var(--font-display); }
.blog-nav a { text-decoration: none; color: var(--color-slate); }
.blog-nav a:hover { color: var(--color-indigo); }

.meta { margin: 0; font-size: var(--text-small); font-weight: 700; color: var(--color-muted); }
.dek { margin: 0 0 var(--space-md); font-size: 1.15rem; line-height: 1.5; color: var(--color-muted); }
a.eyebrow { display: inline-block; text-decoration: none; }

/* Index: one editor's pick, then a section per topic. */
.blog { padding-block: var(--space-xl) var(--space-2xl); }
.pick { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.pick img, .card img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-card); }
.pick h1 { margin: 0 0 var(--space-sm); font: 900 clamp(1.8rem, 1.8vw + 1rem, 2.5rem)/1.12 var(--font-display); color: var(--color-indigo); text-wrap: balance; }
.pick h1 a { text-decoration: none; }
.pick .meta { margin-bottom: var(--space-lg); }
.topics { display: grid; gap: var(--space-2xl); margin-top: var(--space-2xl); }
.topic h2, .related h2 { margin: 0 0 var(--space-lg); font: 900 1.6rem/1.2 var(--font-display); color: var(--color-slate); letter-spacing: 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.card { display: grid; align-content: start; gap: 10px; text-decoration: none; }
.card h3 { margin: 0; font: 900 1.15rem/1.3 var(--font-display); color: var(--color-slate); text-wrap: balance; }
.card:hover h3, .card:focus-visible h3 { color: var(--color-indigo); }

/* Post: one reading column. */
.post { width: min(680px, 100% - 2 * var(--space-lg)); margin-inline: auto; padding-block: var(--space-xl) var(--space-2xl); }
.post h1 { margin: 0 0 var(--space-sm); font: 900 clamp(2rem, 2.4vw + 1rem, 2.75rem)/1.1 var(--font-display); color: var(--color-indigo); text-wrap: balance; overflow-wrap: anywhere; }
.post .cover { width: 100%; height: auto; margin: var(--space-lg) 0 var(--space-md); border-radius: var(--radius-card); }
.post article h2 { margin: var(--space-xl) 0 var(--space-sm); font: 900 1.45rem/1.25 var(--font-display); color: var(--color-slate); letter-spacing: 0; text-wrap: balance; }
.post article p, .post article li { font-size: 1.125rem; line-height: 1.65; }
.post article p { margin: 0 0 var(--space-md); }
.post article ul { padding-left: 1.2em; margin: 0 0 var(--space-md); }
.post article a { color: var(--color-indigo); text-underline-offset: 3px; }
.post .endnote { margin-top: var(--space-xl); font-weight: 800; }
.related { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 2px solid var(--color-hairline); }
.related .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .pick { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .blog-nav .topic-link { display: none; }
  .cards, .related .cards { grid-template-columns: minmax(0, 1fr); }
}