/* Blog pages. Loaded only by /blog/; builds on site.css tokens and components. */

/* The site's Cocogoose file is a trial build with placeholder figures, which
   is why no existing heading contains a number. Blog headings do, so figures
   and currency signs fall back to Kievit (the body face) with lining numerals;
   every letter still renders in Cocogoose. */
@font-face {
  font-family: "Cocogoose Figures";
  src: url("/assets/651169c4b888ea4eb75151f7_KievitPro-Medium.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0024, U+0025, U+0030-0039, U+00A3, U+20AC;
}

.blog-article_title,
.blog-article h2,
.blog-card_title {
  font-family: "Cocogoose Figures", Cocogoose, sans-serif;
  font-variant-numeric: lining-nums;
}

.blog-header {
  padding-bottom: 2.5rem;
}

/* One reading column shared by the article header and body, so the title,
   meta line and text all start on the same edge. 37rem at 1.125rem type
   gives roughly 65 to 75 characters a line. */
.blog-article_column {
  max-width: 37rem;
  margin-left: auto;
  margin-right: auto;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  margin: 0 0 1.25rem;
  font-size: .875rem;
  letter-spacing: .125em;
}

.blog-meta_dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--purple-gradient-2);
}

.blog-article_title {
  text-wrap: balance;
}

.blog-article {
  font-size: 1.125rem;
  line-height: 1.75;
  letter-spacing: .04em;
  color: #ffffffe6;
}

.blog-article p {
  margin: 0 0 1.5rem;
}

.blog-article h2 {
  margin: 3rem 0 1rem;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: .06em;
  color: var(--white);
  text-wrap: balance;
}

.blog-article strong {
  font-weight: 700;
  color: var(--white);
}

.blog-article a {
  color: var(--purple-gradient-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .3s;
}

.blog-article a:hover {
  color: var(--white);
}

.blog-article hr {
  height: 1px;
  margin: 3rem 0 2rem;
  border: 0;
  background-image: linear-gradient(90deg, #0000, var(--purple-gradient-1), #0000);
}

.blog-article_credit {
  font-size: 1rem;
  color: var(--dark-grey);
}

.blog-article_cta {
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border-color-founders);
  border-radius: 1rem;
  background-color: #ffffff0d;
}

.blog-article_cta p {
  margin: 0;
}

/* Figures: inline SVG so they use the site's fonts; they scale to the column. */
.blog-article .blog-figure {
  max-width: none;
  width: auto;
  margin: 2.25rem 0 2.5rem;
}

.blog-figure_svg {
  display: block;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
  width: 100%;
  height: auto;
}

.blog-article .blog-figure figcaption {
  margin-top: .75rem;
  text-align: left;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--dark-grey);
}

/* Callouts: key takeaways, definitions, quotable results */
.blog-article blockquote.blog-callout {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--purple-gradient-1);
  border-radius: 0 .75rem .75rem 0;
  background-color: #ffffff0a;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.blog-article blockquote.blog-callout--takeaways {
  border: 1px solid var(--border-color-founders);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
}

.blog-article blockquote.blog-callout p:last-child,
.blog-article blockquote.blog-callout ul:last-child {
  margin-bottom: 0;
}

.blog-article blockquote.blog-callout p {
  margin-bottom: .75rem;
}

.blog-article ul,
.blog-article ol {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}

.blog-article li {
  margin-bottom: .6rem;
  padding-left: .25rem;
}

.blog-article li::marker {
  color: var(--purple-gradient-2);
}

.blog-article h3 {
  margin: 2rem 0 .6rem;
  font-family: Kievitpro, sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
  color: var(--white);
}

/* Tables: scroll inside their own box on narrow screens, never the page. */
.blog-table {
  margin: 0 0 .75rem;
  overflow-x: auto;
}

.blog-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.5;
}

.blog-table caption {
  padding-bottom: .75rem;
  text-align: left;
  font-weight: 700;
  color: var(--white);
}

.blog-table th,
.blog-table td {
  padding: .65rem .75rem .65rem 0;
  border-bottom: 1px solid #ffffff1f;
  text-align: left;
  vertical-align: top;
}

.blog-table thead th {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark-grey);
  font-weight: 500;
}

.blog-table tbody th {
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.blog-table_source {
  font-size: .875rem;
  color: var(--dark-grey);
}

/* Listing */
.blog-list {
  display: grid;
  gap: 1.5rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.blog-card {
  border: 1px solid #ffffff14;
  transition: border-color .3s, transform .3s;
}

.blog-card_content {
  padding: 1.75rem 2rem 2rem;
}

.blog-card .blog-meta {
  margin-bottom: 1rem;
  font-size: .8125rem;
}

.blog-card_title {
  font-size: 1.375rem;
  line-height: 1.35;
  text-wrap: balance;
}

.blog-card_description {
  margin-top: 1rem;
  max-width: 40rem;
}

.blog-card_arrow {
  transition: background-color .3s;
}

.blog-card:hover {
  border-color: var(--border-color-founders);
  transform: translateY(-2px);
}

.blog-card:hover .blog-card_arrow {
  background-color: var(--purple-gradient-1);
}

.blog-card:focus-visible {
  outline: 2px solid var(--purple-gradient-2);
  outline-offset: 4px;
}

@media screen and (max-width: 767px) {
  .blog-article {
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  .blog-article h2 {
    margin-top: 2.5rem;
    font-size: 1.3rem;
  }

  .blog-article blockquote.blog-callout,
  .blog-article blockquote.blog-callout--takeaways {
    padding: 1.1rem 1.1rem;
    font-size: 1rem;
  }

  .blog-article .blog-figure {
    margin-left: -.5rem;
    margin-right: -.5rem;
  }

  .blog-article .blog-figure figcaption {
    padding: 0 .5rem;
  }

  .blog-table table {
    font-size: .9375rem;
  }

  .blog-card_content {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .blog-card_title {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
  }

  .blog-card:hover {
    transform: none;
  }
}