/* Brings the standalone post (built by Subliminal-Labs/blog-posts) into this site's look:
   white paper, the site's serif for the title and reading text, its sans for the page furniture.
   The figures keep their own type, which they were drawn with. */
@font-face {
  font-family: "SL Newsreader";
  src: url("Newsreader-opsz.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "SL DM Sans";
  src: url("DMSans-opsz.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

html,
body,
.app {
  background: #fff !important;
}

/* header: the same bar as the site's */
.blog-masthead {
  max-width: none !important;
  margin: 0 !important;
  padding: 22px max(clamp(20px, 5vw, 72px), calc((100vw - 1440px) / 2 + 72px)) !important;
  border-bottom: 1px solid #e4e4e2;
}
.blog-brand,
.blog-out,
.blog-foot,
.blog-foot a {
  font-family: "SL DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  color: #0a0a0a !important;
  letter-spacing: 0 !important;
}
.blog-brand {
  font-size: 1rem !important;
  font-weight: 400 !important;
}
.blog-brand span {
  color: #5a5a5a !important;
}
.blog-out {
  font-size: 1rem !important;
}

/* title and standfirst in the site's display serif */
.post-header {
  padding-top: clamp(40px, 5vw, 80px);
}
.post-header h1 {
  font-family: "SL Newsreader", "Times New Roman", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  color: #0a0a0a !important;
}

/* reading text */
article.post,
.post-layout {
  font-family: "SL Newsreader", Georgia, serif !important;
}