/* Use the corporate palette for both the reading surface and shared navigation. */
.ku-blog { background: var(--surface); color: var(--on-surface); color-scheme: dark; overflow-x: visible; }
.ku-blog :is(h1, h2, h3) { letter-spacing: 0; color: var(--on-surface); }
.blog-main { width: min(1080px, calc(100% - 64px)); margin: 0 auto; padding: 120px 0 80px; }
.blog-main :is(p, h1, h2, a) { overflow-wrap: anywhere; }
.blog-main a { transition: color 160ms ease; }
.blog-main a:hover { color: var(--tertiary); }
.blog-main a:focus-visible, .blog-skip:focus-visible { outline: 3px solid var(--secondary); outline-offset: 5px; }
.blog-index-heading { padding: 0 0 38px; max-width: 760px; }
.blog-eyebrow { color: var(--secondary); font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.blog-index h1 { font-size: 46px; line-height: 1.14; margin: 0 0 18px; }
.blog-deck { font-size: 19px; line-height: 1.7; color: var(--on-surface-variant); }
.blog-story { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--outline-variant); }
.blog-image-link { display: block; overflow: hidden; background: var(--surface-lowest); }
.blog-image-link img { display: block; width: 100%; height: 360px; object-fit: cover; object-position: center 48%; }
.blog-story h2 { font-size: 32px; line-height: 1.28; max-width: 860px; margin: 0 0 18px; }
.blog-story > p:not(.blog-meta) { max-width: 800px; color: var(--on-surface-variant); font-size: 18px; line-height: 1.7; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; font-size: 14px; line-height: 1.6; margin: 24px 0 16px; color: var(--outline); }
.blog-meta span { color: var(--tertiary); font-weight: 700; }
.blog-read-link { display: inline-flex; align-items: center; gap: 12px; padding: 12px 0; margin-top: 12px; font-weight: 700; color: var(--secondary); }
.blog-read-link span { font-size: 22px; }
.blog-reading { max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-back { font-size: 15px; color: var(--primary); }
.blog-article-heading h1 { font-size: 42px; line-height: 1.19; margin: 0 0 24px; }
.blog-byline { font-size: 14px; color: var(--outline); margin: 20px 0 32px; }
.blog-article-image { margin: 0 0 44px; }
.blog-article-image img { display: block; width: 100%; height: auto; aspect-ratio: 1376 / 768; }
.blog-prose { font-size: 18px; line-height: 1.85; }
.blog-prose p { margin: 0 0 24px; }
.blog-prose .blog-opening { font-size: 23px; line-height: 1.65; font-weight: 600; }
.blog-prose h2 { font-size: 27px; line-height: 1.3; margin: 48px 0 20px; }
.blog-prose a { color: var(--secondary); text-decoration: underline; text-underline-offset: 4px; }
.blog-prose strong { color: var(--on-surface); }
.blog-measurement { margin: 32px 0; padding: 24px 0; border-top: 2px solid var(--tertiary); border-bottom: 1px solid var(--outline-variant); }
.blog-measurement .blog-measurement-label { color: var(--on-surface-variant); font-size: 14px; margin-bottom: 18px; }
.blog-measurement dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 18px; }
.blog-measurement dt { font-size: 15px; color: var(--on-surface-variant); }
.blog-measurement dd { font-size: 34px; line-height: 1.4; color: var(--tertiary); font-weight: 700; font-variant-numeric: tabular-nums; }
.blog-measurement > p:last-child { font-size: 14px; margin: 0; }
.blog-sources { border-top: 1px solid var(--outline-variant); margin-top: 48px; }
.blog-sources ul { padding-left: 24px; }
.blog-sources li { margin-bottom: 12px; }
.blog-skip { position: fixed; top: -80px; left: 16px; z-index: 2000; padding: 12px 18px; background: var(--surface-container-high); color: var(--on-surface); }
.blog-skip:focus { top: 8px; }
.ku-blog .footer { background: var(--surface-lowest); }
@media (max-width: 768px) {
  .blog-main { width: calc(100% - 40px); padding-top: 104px; padding-bottom: 48px; }
  .blog-index-heading { padding-bottom: 28px; }
  .blog-index h1 { font-size: 32px; }
  .blog-deck { font-size: 17px; }
  .blog-image-link img { height: auto; aspect-ratio: 16 / 9; }
  .blog-story h2 { font-size: 26px; }
  .blog-article-heading h1 { font-size: 32px; }
  .blog-prose { font-size: 17px; }
  .blog-prose .blog-opening { font-size: 21px; }
  .blog-prose h2 { font-size: 24px; }
  .blog-measurement dd { font-size: 28px; }
}