/* Hallmark · macrostructure: Ecosystem Index · nav: dropdown bar (Subjects, Stories, Language) · footer: the landing's
 * theme: studied-DNA (source: https://blog.duolingo.com, studied 2026-10-13) · paper #fff · display lowercase in the
 * brand colour (Duolingo green #58cc02, here --color-indigo) · labels uppercase grey · ghost buttons · hairline rules
 * Fonts: Duolingo's Feather + duolingo-sans (rounded) carried by Nunito. studied: yes · DNA-source: url + screenshots
 * Home: lead split (text left) · row of cards · curated list · Family stories · the app · most recent. A post shows
 * once per page; empty sections drop out (Duolingo repeats posts, which only works with hundreds of them). */

/* Header (owner, 2026-10-13): the logo in a graduation cap and "BLOG", then Subjects, Stories and Language as
 * blog.duolingo.com's uppercase dropdowns (the .menu styles live in site.css). Phones: one Menu holds all three. */
.top .blog-brand span { display: inline; }
.blog-brand img { width: 40px; height: 48px; margin-top: -8px; }
.blog-nav { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
.blog-nav > a { font: 800 0.85rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; }
.blog-nav > a:hover { color: var(--color-indigo); }
.nav-mobile { display: none; margin-left: auto; }

.meta { margin: 0; font-size: var(--text-small); font-weight: 700; color: var(--color-muted); }
/* Card, row and lead meta: "OCT 11, 2026 | JARSAVE TEAM", as Duolingo's. */
.card .meta, .row .meta, .pick .meta { display: flex; align-items: center; font: 800 0.72rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sep { width: 1px; height: 10px; margin: 0 10px; background: var(--color-muted); opacity: 0.5; }
.dek { margin: 0 0 var(--space-md); font-size: 1.15rem; line-height: 1.5; color: var(--color-muted); }

/* The lead (home and subject pages): text left, cover right, a meta line, the title lowercase in the brand
 * colour, a summary, a ghost button. Phones: cover first, the label, the title in normal case, no button. */
.blog { padding-block: var(--space-xl) var(--space-2xl); }
.pick { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); align-items: center; }
.pick-art { order: 2; }
.pick img, .card img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-card); }
.pick .eyebrow { margin-bottom: var(--space-sm); color: var(--color-muted); }
.pick .pick-label { display: none; }
.pick .meta { margin-bottom: var(--space-md); }
.pick h1 { margin: 0 0 var(--space-md); font: 900 clamp(1.9rem, 1.9vw + 1rem, 2.6rem)/1.1 var(--font-display); color: var(--color-indigo); text-transform: lowercase; text-wrap: balance; overflow-wrap: anywhere; }
.pick h1 a { text-decoration: none; }
.pick .btn { margin-top: var(--space-sm); }
.related h2 { margin: 0 0 var(--space-lg); font: 900 1.6rem/1.2 var(--font-display); color: var(--color-slate); letter-spacing: 0; }

/* Home, after the lead: a row of cards, then sections split by hairline rules, as Duolingo's. */
.home > section + section { margin-top: 56px; }
.home .rule { padding-top: 56px; border-top: 2px solid var(--color-hairline); }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.shelf-head .eyebrow { margin: 0; color: var(--color-muted); }
.shelf-head .more, .series h2 a { text-decoration: none; }
.shelf-head .more { font: 800 0.8rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-indigo); white-space: nowrap; }
.shelf-head .more:hover, .series h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.series h2, .promo h2 { margin: 0 0 var(--space-sm); font: 900 clamp(1.9rem, 1.6vw + 1rem, 2.4rem)/1.15 var(--font-display); color: var(--color-indigo); letter-spacing: 0; text-transform: lowercase; }
.series h2 a { color: inherit; }
.series-desc, .promo > p { margin: 0 0 var(--space-xl); max-width: 42em; font-size: 1.05rem; line-height: 1.55; color: var(--color-muted); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.center { margin: var(--space-xl) 0 0; text-align: center; }
.promo { text-align: center; }
.promo > p { margin-inline: auto; }
.promo img { width: min(640px, 100%); height: auto; aspect-ratio: 1200 / 630; object-fit: cover; margin: 0 auto var(--space-lg); border-radius: var(--radius-card); }
.empty { margin: 0; max-width: 40em; font-size: 1.05rem; line-height: 1.55; color: var(--color-muted); }
.empty a { color: var(--color-indigo); }
.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 opening (owner, 2026-10-13): definition for a first-time reader, then the contents, then the app. */
.post .define { margin: 0 0 var(--space-lg); padding-left: var(--space-md); border-left: 4px solid var(--color-lime); font-size: 1.25rem; line-height: 1.55; }
.post .define strong { color: var(--color-indigo); }
.toc { margin: 0 0 var(--space-lg); }
.toc-title { margin: 0 0 var(--space-sm); font: 900 0.85rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.post .toc ul { margin: 0; padding-left: 1.2em; }
.post .toc li { margin-bottom: 6px; font: 800 1.05rem/1.4 var(--font-display); }
.post .toc a { color: var(--color-indigo); text-decoration: none; }
.post .toc a:hover { text-decoration: underline; }
.post article h2[id] { scroll-margin-top: 90px; } /* clears the sticky header */
.app-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-lime-wash); }
.app-cta img { border-radius: 14px; }
.post .app-cta .btn { color: var(--color-slate); text-decoration: none; } /* not the article's link colour */
.post .app-cta p { margin: 0; font-size: 1rem; line-height: 1.45; }
/* Post end: tags (each opens its tag page), then share. */
.post-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); }
.post .tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0; }
.tags-title { margin-right: 4px; font: 900 0.85rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.post a.tag { color: var(--color-slate); text-decoration: none; }
.post a.tag:hover { background: var(--color-lime-wash); color: var(--color-indigo); }
.tag { padding: 7px 14px; border-radius: var(--radius-button); background: var(--color-row); font: 800 0.85rem/1 var(--font-display); color: var(--color-slate); white-space: nowrap; }
.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)); }

/* Subject and Stories pages: blog.duolingo.com/hub/language/, the lead post with its text left, up to
 * three more as cards, then a rule and "All posts" as rows of a small cover and the title. */
.hub { padding-block: var(--space-xl) var(--space-2xl); }
.hub .cards { margin-top: var(--space-2xl); }
.all { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 2px solid var(--color-hairline); }
.all .eyebrow { color: var(--color-muted); }
.rows { display: grid; gap: var(--space-lg); }
.row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: var(--space-lg); text-decoration: none; }
.row img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 18px; }
.row h3 { margin: 6px 0 0; font: 900 1.15rem/1.3 var(--font-display); color: var(--color-slate); text-wrap: balance; }
.row:hover h3 { color: var(--color-indigo); }
.hub > h1 { margin: 0 0 var(--space-md); font: 900 clamp(2.2rem, 3vw + 1rem, 3rem)/1.1 var(--font-display); color: var(--color-indigo); }
.hub > .eyebrow { margin-bottom: var(--space-sm); color: var(--color-muted); }

/* Tag page: blog.duolingo.com/tag/learning/, a grey label, the tag in lowercase, a filter, then cards. */
.tag-page { padding-block: var(--space-xl) var(--space-2xl); }
.tag-page .eyebrow { margin-bottom: var(--space-sm); color: var(--color-muted); }
.tag-page h1 { margin: 0 0 var(--space-lg); font: 900 clamp(2.2rem, 3vw + 1rem, 3rem)/1.1 var(--font-display); color: var(--color-indigo); overflow-wrap: anywhere; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.filters .menu > summary { color: var(--color-slate); }
.filters .clear { font: 800 0.85rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-indigo); text-decoration: none; }
.filters .clear:hover { text-decoration: underline; }

/* 404: for /tag, /en/tag/ and anything else that isn't a page. */
.not-found { padding-block: var(--space-3xl); text-align: center; }
.not-found h1 { margin: 0 0 var(--space-md); font: 900 clamp(4rem, 10vw, 7rem)/1 var(--font-display); color: var(--color-indigo); }
.not-found p { margin: 0; font-size: 1.1rem; color: var(--color-muted); }
.not-found .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); }

@media (max-width: 860px) {
  .pick { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .pick-art { order: 0; }
  .pick .pick-label { display: block; color: var(--color-lime-edge); }
  .home .pick .meta, .home .pick .btn { display: none; }
  .pick h1 { text-transform: none; color: var(--color-slate); font-size: clamp(1.5rem, 4vw + 0.8rem, 2rem); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .blog-nav { display: none; }
  .nav-mobile { display: block; }
  .app-cta { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--space-md); }
  .app-cta img { width: 40px; height: 40px; border-radius: 10px; }
  .app-cta .btn { grid-column: 1 / -1; }
  .row { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: var(--space-md); }
  .row h3 { font-size: 1rem; }
  .cards, .cards.two, .related .cards { grid-template-columns: minmax(0, 1fr); }
  .home .rule { padding-top: var(--space-xl); }
  .home > section + section { margin-top: var(--space-xl); }
}