/* Server-rendered editorial pages share the application palette and controls. */
#marketing-header { position:sticky; top:0; z-index:50; }
.blog-layout { font-size:16px; }
.blog-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 4vw; border-bottom:1px solid var(--line); }
.blog-header nav { display:flex; gap:32px; margin-right:auto; margin-left:36px; font-size:14px; }
.blog-header a:hover, .blog-footer a:hover { color:var(--brand-primary); }
.blog-skip { position:absolute; left:16px; top:-100px; z-index:60; padding:12px; background:var(--canvas); }
.blog-skip:focus { top:16px; }
.blog-index { display:grid; grid-template-columns:235px minmax(0,1fr); gap:60px; max-width:1440px; margin:0 auto; padding:72px 48px 90px; }
.blog-sidebar { border-right:1px solid var(--line); padding-right:30px; }
.blog-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:600; }
.blog-sidebar h1 { font-size:37px; letter-spacing:var(--type-heading-tracking); line-height:1.05; margin:19px 0 24px; }
.blog-sidebar h1 em { font-family:var(--type-heading); font-size:53px; font-weight:inherit; font-style:normal; }
.blog-sidebar > p:not(.blog-eyebrow) { color:var(--secondary); line-height:1.6; }
.blog-sidebar nav { display:grid; gap:4px; margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }
.blog-sidebar nav a { padding:8px 0; color:var(--secondary); }
.blog-sidebar nav a[aria-current], .blog-sidebar nav a:hover { color:var(--text); font-weight:600; }
.blog-sidebar nav span { float:right; }
.blog-list-heading { display:flex; justify-content:space-between; gap:16px; padding-bottom:24px; font-size:13px; }
.blog-category-description { margin:0 0 28px; color:var(--secondary); }
.blog-list-heading span { color:var(--secondary); }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px 36px; }
.blog-card-art { display:block; overflow:hidden; border-radius:10px; border:1px solid color-mix(in srgb,var(--text) 6%,transparent); }
.blog-art { aspect-ratio:16/9; overflow:hidden; color:var(--text); }
.blog-art--website { background:var(--orange-soft); }
.blog-art--gathering { background:var(--yellow-soft); }
.blog-art--welcome { background:var(--green-soft); }
.blog-art svg { display:block; width:100%; height:100%; }
.blog-art img { display:block; width:100%; height:100%; object-fit:cover; }
.blog-card-category { margin:19px 0 8px; font-size:12px; color:var(--secondary); }
.blog-card-category span { margin-left:5px; }
.blog-card h2 { font-size:24px; letter-spacing:var(--type-heading-tracking); line-height:1.2; }
.blog-card h2 a:hover { text-decoration:underline; text-underline-offset:4px; }
.blog-card-description { margin-top:12px; color:var(--secondary); font-size:15px; line-height:1.65; }
.blog-byline { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:20px; font-size:12px; }
.blog-byline time { color:var(--secondary); margin-left:auto; }
.blog-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:64px; padding:32px; background:var(--surface); border-radius:12px; }
.blog-cta h2 { font-size:25px; letter-spacing:var(--type-heading-tracking); }
.blog-cta p { margin-top:5px; color:var(--secondary); font-size:14px; }
.blog-cta .btn { flex-shrink:0; }
.blog-hero { position:relative; padding:62px 24px 64px; background:var(--surface-inverse); color:var(--on-surface-inverse); text-align:center; }
.blog-back { display:block; max-width:1120px; text-align:left; margin:0 auto 38px; font-size:13px; }
.blog-hero > .blog-eyebrow { display:inline-block; padding:6px 12px; border:1px solid currentColor; border-radius:30px; }
.blog-hero h1 { max-width:900px; margin:23px auto 20px; font-size:clamp(34px,4vw,54px); line-height:1.09; letter-spacing:var(--type-heading-tracking); }
.blog-deck { max-width:650px; margin:0 auto; font-size:17px; line-height:1.65; opacity:.8; }
.blog-hero-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 24px; margin:27px 0 0; font-size:12px; }
.blog-updated { font-size:12px; margin-top:8px; }
.blog-hero-art { max-width:720px; margin:38px auto 0; border-radius:12px; overflow:hidden; }
.blog-reading-layout { display:grid; grid-template-columns:220px minmax(0,680px); gap:70px; max-width:1110px; margin:0 auto; padding:64px 32px 30px; align-items:start; }
.blog-toc { position:sticky; top:calc(var(--marketing-header-height, 88px) + 24px); display:grid; gap:14px; font-size:13px; line-height:1.5; }
.blog-toc p { font-weight:600; margin-bottom:6px; }
.blog-toc a { color:var(--secondary); }
.blog-toc a:hover { color:var(--brand-primary); }
.blog-prose { font-size:var(--type-body-size); line-height:var(--type-body-leading); max-width:var(--type-reading-measure); min-width:0; overflow-wrap:break-word; text-align:start; }
.blog-prose section { margin-bottom:42px; scroll-margin-top:calc(var(--marketing-header-height, 88px) + 24px); }
.blog-prose h2 { font-size:27px; line-height:1.25; letter-spacing:var(--type-heading-tracking); margin-bottom:12px; }
.blog-prose h3 { font-size:20px; line-height:1.4; margin:25px 0 10px; }
.blog-prose p + p { margin-top:18px; }
.blog-prose ul { padding-left:24px; margin:18px 0 0; }
.blog-prose li + li { margin-top:10px; }
.blog-prose a { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.blog-summary { background:var(--surface); border-radius:12px; padding:28px; }
.blog-summary h2 { font-size:18px; }
.blog-summary li { font-size:15px; }
.blog-author { display:flex; gap:18px; border-top:1px solid var(--line); padding-top:26px; font-size:14px; }
.blog-author-photo { flex-shrink:0; border-radius:50%; object-fit:cover; }
.blog-author-initials { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--text); font-size:12px; font-weight:600; }
.blog-author-links { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; }
.blog-author h2 { font-size:18px; margin-bottom:0; }
.blog-byline a:hover, .blog-hero-meta a:hover { text-decoration:underline; }
.blog-author p { color:var(--secondary); margin-top:5px; }
.blog-related { max-width:1040px; margin:60px auto 80px; padding:0 32px; }
.blog-related > h2 { font-size:34px; letter-spacing:var(--type-heading-tracking); margin-bottom:32px; }
.blog-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px; background:var(--surface); padding:48px 5vw; }
.blog-footer p { color:var(--secondary); margin-top:12px; font-size:14px; }
.blog-footer nav { display:flex; flex-wrap:wrap; gap:24px; font-size:14px; }
.blog-footer small { color:var(--secondary); }
@media (max-width:1100px) {
  .blog-index { grid-template-columns:190px minmax(0,1fr); gap:32px; padding:48px 28px; }
  .blog-sidebar h1 { font-size:30px; }
  .blog-grid { gap:40px 24px; }
  .blog-reading-layout { gap:36px; }
  .blog-cta { align-items:start; flex-direction:column; }
}
@media (max-width:740px) {
  .blog-header { gap:16px; padding:18px 20px; flex-wrap:wrap; }
  .blog-header .brand-logo { font-size:25px; }
  .blog-header nav { order:3; margin:0; width:100%; gap:24px; }
  .blog-index { display:block; padding:38px 20px 50px; }
  .blog-sidebar { padding:0; border:0; }
  .blog-sidebar h1 { font-size:38px; }
  .blog-sidebar h1 br { display:none; }
  .blog-sidebar h1 em { font-size:46px; }
  .blog-sidebar > p br { display:none; }
  .blog-sidebar nav { display:flex; flex-wrap:wrap; gap:8px 22px; margin:24px 0 28px; padding-top:14px; }
  .blog-sidebar nav span { display:none; }
  .blog-grid { grid-template-columns:1fr; gap:36px; }
  .blog-card h2 { font-size:25px; }
  .blog-hero { padding:28px 20px 36px; }
  .blog-back { margin-bottom:30px; }
  .blog-hero h1 { letter-spacing:var(--type-heading-tracking); }
  .blog-hero-art { margin-top:28px; }
  .blog-reading-layout { display:block; padding:32px 20px; }
  .blog-toc { position:static; margin-bottom:32px; padding-bottom:28px; border-bottom:1px solid var(--line); }
  .blog-summary { padding:23px; }
  .blog-related { margin:24px auto 48px; padding:0 20px; }
  .blog-cta { margin-top:40px; padding:24px; }
}

.blog-introduction { margin-bottom:42px; }
.blog-prose :is(ul, ol) { padding-left:24px; }
.blog-prose :is(ul, ol, pre, blockquote) + p { margin-top:18px; }
.blog-prose blockquote { margin:24px 0; padding:20px 24px; background:var(--surface); border-radius:12px; }
.blog-prose pre { padding:20px; overflow-x:auto; background:var(--surface); border-radius:12px; font-size:14px; line-height:1.7; white-space:pre-wrap; }
.blog-table { position:relative; overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:24px 0; }
.blog-table table { width:100%; min-width:440px; border-collapse:collapse; text-align:left; font-size:14px; line-height:1.6; }
.blog-table thead { background:var(--surface); color:var(--secondary); font-size:12px; }
.blog-table th, .blog-table td { padding:12px 16px; vertical-align:top; }
.blog-table thead th { font-weight:600; }
.blog-table tbody th { font-weight:400; }
.blog-table tbody tr { border-top:1px solid var(--line); }
.blog-table tbody tr:hover { background:var(--surface); }

.blog-prose :is(ul, ol) { list-style-position:outside; padding-inline-start:1.5em; }
.blog-prose :is(td, th) { font-variant-numeric:tabular-nums; }