/* The personal essays use the same local fonts as Verified Examples. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/blog/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/blog/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/blog/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/blog/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body.blog-page, .ai4-page.blog-index {
  --blog-body: "IBM Plex Sans", system-ui, sans-serif;
  --blog-heading: Inter, var(--blog-body);
  --sans: var(--blog-body);
  --serif: var(--blog-body);
  -webkit-font-smoothing: antialiased;
  font-family: var(--blog-body) !important;
}
body.blog-page {
  font-size: 17.5px !important;
  line-height: 1.7 !important;
}
body.blog-page :is(p, li, td, th, label, button, summary, figcaption, .byline,
    .site-bar, .eyebrow, .toc, .toc-title, .subtitle, .caption, .small, footer) {
  font-family: var(--blog-body) !important;
}
body.blog-page :is(h1, h2, h3, h4), .blog-index :is(h2, h3) {
  font-family: var(--blog-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}
body.blog-page h1 {
  font-size: clamp(28px, 4vw, 34px) !important;
  line-height: 1.3 !important;
  max-width: none !important;
}
body.blog-page h2 { font-size: 25px !important; line-height: 1.3 !important; }
body.blog-page h3 { font-size: 20px !important; line-height: 1.4 !important; }
body.blog-page :is(pre, code) {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}
body.blog-page .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 3px;
}
body.blog-page :is(.calculation, .math-display, .equation, .eq, .formula) {
  min-width: 0;
  max-width: 100%;
}
body.blog-page .formula-grid > * { min-width: 0; }
body.blog-page .tinytable { display: block; max-width: 100%; overflow-x: auto; }
body.blog-page .katex { font-size: 1.09em; }

body.essay-single {
  --paper: #fff;
  --ink: #252b32;
  --muted: #69737d;
  --line: #e0e5e8;
  --accent: #286493;
}
body.essay-single :is(.essay-header, .essay-grid) { max-width: 724px; }
body.essay-single .dek { font-size: 19px; line-height: 1.65; }
body.essay-single .essay-header { padding-top: 3rem; padding-bottom: 2rem; }
body.essay-single .essay-grid { padding-bottom: 3rem; }
body.essay-with-contents :is(.essay-header, .essay-grid) { max-width: 972px; }
body.essay-with-contents .essay-header { padding-left: 280px; }
body.essay-with-contents .contents summary { display: none; }
body.essay-with-contents .essay-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 660px);
  gap: 48px;
}
body.essay-single article h2 { margin-top: 50px; margin-bottom: 20px; }
body.essay-single blockquote p:last-child { margin-bottom: 0; }
body.essay-single blockquote cite {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
}
body.essay-single .calculation { padding: 16px 0; }
body.essay-single .vision-sketch { margin: 2rem 0; }
body.essay-single .vision-sketch a { display: block; }
body.essay-single .vision-sketch img { display: block; width: 100%; height: auto; }
body.essay-single .vision-sketch figcaption {
  margin-top: .75rem;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 800px) {
  body.essay-single :is(.essay-header, .essay-grid) { padding-inline: 20px; }
  body.essay-with-contents .essay-grid { display: block; }
  body.essay-with-contents .contents summary { display: list-item; }
}