/* Fly.io-inspired typography and callouts */
@font-face {
  font-family: "Inter var";
  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter var";
  src: url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
:root{
  --main-width: 760px;
  --content-gap: 28px;
  --gap: 28px;
  --radius: 14px;
  --fly-callout-bg: hsl(255 90% 96%);
  --fly-callout-border: hsl(255 70% 85%);
  --fly-callout-shadow: 0 6px 18px rgba(109, 40, 217, 0.12);
  --fly-callout-title: var(--primary);
}
.dark{
  --fly-callout-bg: hsl(255 35% 20% / 0.35);
  --fly-callout-border: hsl(255 20% 65% / 0.4);
  --fly-callout-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
body{
  font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.post-title{ letter-spacing: -0.01em; }
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4{ letter-spacing: -0.01em; }
.post-content h1{ margin: 56px auto 20px; font-size: 42px; }
.post-content h2{ margin: 44px auto 16px; font-size: 32px; }
.post-content h3{ margin: 32px auto 12px; font-size: 24px; }
.post-content p,
.post-content ol,
.post-content ul,
.post-content figure{ margin-bottom: var(--content-gap); }
.post-content li{ margin-top: 8px; }
.post-content a{ text-underline-offset: 3px; }
/* Turn Markdown blockquotes into soft callouts */
.post-content blockquote{
  margin: 36px 0;
  padding: 18px 22px;
  border: 1px solid var(--fly-callout-border);
  background: var(--fly-callout-bg);
  border-left: 0; border-inline-start: 0;
  border-radius: 16px;
  box-shadow: var(--fly-callout-shadow);
}
.post-content blockquote p{ margin: 0; }
.post-content blockquote p + p{ margin-top: 10px; }
.post-content blockquote p:first-child strong{
  display: inline-block;
  font-weight: 700;
}
/* Shortcode-based callouts */
.callout{
  margin: 36px 0;
  padding: 18px 22px;
  border: 1px solid var(--fly-callout-border);
  background: var(--fly-callout-bg);
  border-radius: 16px;
  box-shadow: var(--fly-callout-shadow);
  color: var(--content);
}
.callout .callout-title{
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--fly-callout-title);
}
.callout.info{
  --fly-callout-bg: hsl(248 100% 97%);
  --fly-callout-border: hsl(248 60% 82%);
}
.callout.tip{
  --fly-callout-bg: hsl(160 60% 95%);
  --fly-callout-border: hsl(160 40% 70%);
}
.callout.warn{
  --fly-callout-bg: hsl(40 100% 95%);
  --fly-callout-border: hsl(40 70% 75%);
}
.dark .callout.info{ --fly-callout-bg: hsl(248 35% 22% / 0.4); }
.dark .callout.tip{ --fly-callout-bg: hsl(160 25% 20% / 0.4); }
.dark .callout.warn{ --fly-callout-bg: hsl(40 30% 22% / 0.45); }
/* Softer images and code to match the aesthetic */
.post-content img{ border-radius: 12px; }
.post-content code{ border-radius: 4px; }
.post-content pre code{ border-radius: 12px; }
/* Increase link underline weight on hover for readability */
.post-content a:hover{ text-decoration: underline; }