/* blogmodern.css — blog POST pages only.
   Loaded from bloghost.php post view only, and every rule below is scoped
   to .blog-hero or .blogarticle, so the blog list, homepage and all other
   pages are unaffected. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/commonresources/fonts/archivo.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/commonresources/fonts/fraunces-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/commonresources/fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Hero (Format C) --- */
.blog-hero { background: #1f3864; color: #fff; margin-top: 52px; }
.blog-hero-inner { box-sizing: border-box; max-width: 720px; margin: 0 auto; padding: 56px 24px 48px; }
.blog-hero-kicker { font-family: 'Archivo', 'Inter', system-ui, sans-serif; color: #fbbf24; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; }
.blog-hero h1 { font-family: 'Archivo', 'Inter', system-ui, sans-serif; font-size: 54px; line-height: 1.05; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.015em; color: #fff; text-align: left; }
.blog-hero-inner p { text-align: left; }
.blog-hero-standfirst { font-family: 'Inter', system-ui, Arial, sans-serif; font-size: 21px; line-height: 1.5; color: #dbeafe; margin: 0 0 14px; }
.blog-hero-meta { font-family: 'Inter', system-ui, Arial, sans-serif; font-size: 14px; color: #93c5fd; margin: 0; }
.blog-hero-img img { width: 100%; display: block; }

/* --- Article body (Format A) --- */
.blogarticle .BlogPageSection {
  box-sizing: border-box;
  width: 100%; max-width: 720px;
  margin: 32px auto;
  background: #faf8f3;
  border-radius: 0; box-shadow: none;
  padding: 40px 24px 64px;
  font-family: 'Inter', system-ui, Arial, sans-serif;
  font-size: 18px; line-height: 1.75; color: #201a17;
}
.blogarticle .BlogPageSection h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px; line-height: 1.25;
  font-style: normal; text-transform: none; font-weight: 600; color: #201a17;
  margin: 48px 0 12px;
}
.blogarticle .BlogPageSection p {
  font-size: 18px; line-height: 1.75; margin: 0 0 20px; text-align: left; color: #201a17;
}
.blogarticle .BlogPageSection > p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 58px; line-height: 1; float: left; padding: 6px 10px 0 0; color: #1f3864;
}
.blogarticle .BlogPageSection img { max-width: 100%; height: auto; border-radius: 4px; }
.blogarticle .BlogPageSection a { color: #0b5394; text-decoration: underline; text-underline-offset: 2px; }
.blogarticle .BlogPageSection a:visited { color: #0b5394; }
.blogarticle .BlogPageSection a:hover { color: #083a6b; }
.blogarticle .blogback { box-sizing: border-box; max-width: 720px; margin: 24px auto 14px; padding: 0 24px; }

@media (max-width: 640px) {
  .blog-hero-inner { padding: 36px 20px 32px; }
  .blog-hero h1 { font-size: 36px; }
  .blog-hero-standfirst { font-size: 19px; }
  .blogarticle .BlogPageSection { font-size: 17px; padding: 28px 20px 48px; }
  .blogarticle .BlogPageSection h2 { font-size: 24px; margin-top: 36px; }
  .blogarticle .BlogPageSection p { font-size: 17px; }
}

@media (max-width: 768px) {
  .blog-hero { margin-top: 44px; }
}