/* The blog (a Ghost export, tools/pages/blog.py): Ghost's layout and cards in the brand fonts and colours,
   matching the guides (.pg-prose in page.css). Loads after Ghost's CSS and the brand CSS. */

:root {
  --font-sans: var(--font);
  --font-serif: var(--font);
  --ghost-accent-color: var(--coral-700);
  --color-darkgrey: var(--ink);
  --color-midgrey: var(--text-on-paper-3);
  --color-secondary-text: var(--text-on-paper-3);
  --color-border: var(--hair-on-paper);
  --color-lightgrey: var(--hair-on-paper);
  --color-wash: var(--coral-100);
}
html, body { background: var(--paper); }
body { color: var(--ink); font-family: var(--font); }
.viewport, .site-content { background: transparent; }

/* Article header */
.article-tag, .article-tag a, .post-card-primary-tag {
  font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--text-on-paper-3);
}
.article-title { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.article-excerpt { margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--text-on-paper-2); }
.article-byline-content .author-name, .article-byline-content .author-name a { color: var(--ink); }
.byline-meta-content, .byline-reading-time { color: var(--text-on-paper-3); }

/* Article text: the same size, measure and colours as the guides */
.gh-content > p, .gh-content > ul, .gh-content > ol, .gh-content > dl, .gh-content > blockquote:not([class]),
.gh-content .kg-callout-card .kg-callout-text, .gh-content .kg-toggle-card .kg-toggle-content > p {
  font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--text-on-paper-2);
}
.gh-content > [id] { font-family: var(--font); }
.gh-content h2, .gh-content h3, .gh-content h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.gh-content h2 { font-size: 26px; }
.gh-content h3 { font-size: 20px; letter-spacing: -0.01em; }
.gh-content h4 { font-size: 17px; letter-spacing: 0; }
.gh-content strong, .gh-content b { color: var(--ink); font-weight: 600; }
.gh-content a { color: var(--hl-on-paper); font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; box-shadow: none; }
.gh-content a:hover { color: var(--coral-800); }
.gh-content > blockquote:not([class]) { border-left: 3px solid var(--hair-on-paper); padding-left: 18px; color: var(--ink); }
.gh-content figcaption { font-size: 14px; color: var(--text-on-paper-3); }
.gh-content hr { border-color: var(--hair-on-paper); }

/* Post cards: the blog home, tag and author pages, "Read more" */
.post-card-title { font-family: var(--font); color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; opacity: 1; }
.post-card-excerpt { font-family: var(--font); color: var(--text-on-paper-2); }
.post-card-meta, .post-card-meta-date, .post-card-meta-length { color: var(--text-on-paper-3); }
.read-more-wrap { background: transparent; }
.read-more-wrap .read-more { border-top: 1px solid var(--hair-on-paper); }

/* Blog home and tag/author headers: ink band like the site's closing band, instead of a photo with white text */
.site-header-cover { display: none; }
.site-header-content, .has-cover .site-header-content {
  min-height: 0; padding-top: 56px; padding-bottom: 56px; background-color: var(--ink); color: var(--paper);
}
.site-title, .site-header-content .site-title { font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; color: var(--paper); }
.site-description { color: rgba(249, 247, 247, 0.75); }
.tag-template .post-card-large .post-card-image-link, .author-template .post-card-large .post-card-image-link { border-radius: 12px; }

/* Ghost's pager on the blog home */
.pagination a, .pagination .page-number { color: var(--ink); }

/* "Topics" at the end of a post: links to its tag pages (tools/pages/blog.py) */
.blog-topics { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair-on-paper); }
.blog-topics_h { margin-bottom: 10px; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-on-paper-3); }
.blog-topics ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.blog-topics li, .blog-topics li + li { margin: 0; padding: 0; }  /* Ghost's list spacing pushed every chip but the first down 8px */
.blog-topics a { display: inline-block; padding: 6px 12px; border: 1px solid var(--hair-on-paper); border-radius: 999px; font-size: 14px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.blog-topics a:hover { border-color: var(--ink); }

/* The byline name is a div (it was an h4, a skipped heading level); keep its heading line height */
.article-byline-meta .author-name { line-height: 1.15; }

/* Trial boxes in posts (Ghost header cards): the headline sat 5px above the line under it, and on a phone
   ran to four lines at 48px */
.kg-header-card h2 + h3.kg-header-card-subheader { margin-top: 1em; }
@media (max-width: 640px) {
  .kg-header-card h2.kg-header-card-header,
  .kg-header-card.kg-size-small h2.kg-header-card-header,
  .kg-header-card.kg-size-large h2.kg-header-card-header { font-size: 2.25em; }
}

/* Button cards in posts took Ghost's accent colour as a fill, which here is coral; buttons are ink on this site */
.kg-button-card a.kg-btn-accent { background-color: var(--ink); color: var(--paper); }
.kg-button-card a.kg-btn-accent:hover { opacity: .88; }