/* The blog (scripts/build-docs.mjs): the docs' reading layout without the pages column, a cover under each article's
   title, figures with captions, and cards for the index and Keep reading. Same tokens as docs.css. */
.doc-layout.blog-layout{grid-template-columns:minmax(0,1fr);max-width:1080px}
.doc-layout.blog-layout.has-toc{grid-template-columns:minmax(0,1fr) 200px}
.blog-layout .doc-main{max-width:760px}
.blog-index .doc-main{max-width:none}
.doc-eyebrow a{color:inherit;text-decoration:none}
.doc-eyebrow a:hover{color:var(--rust)}

.blog-byline{margin:-6px 0 24px;color:var(--muted);font:600 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}
.doc-article h1+.blog-byline{font-size:12px;line-height:1.5;color:var(--muted)}
.blog-cover{margin:0 0 34px}
.blog-cover img{display:block;width:100%;height:auto;aspect-ratio:1672/941;border-radius:12px;background:#0b224e}

/* A figure in the article: the image at the reading measure, and what it shows, in a smaller line under it. */
.doc-figure{margin:28px 0 30px}
.doc-figure img{display:block;width:100%;height:auto;border:1px solid #dbe3ee;border-radius:10px;background:#fff}
.doc-figure figcaption{margin-top:10px;color:var(--muted);font-size:13.5px;line-height:1.55}

/* The index: the title, a row of category tabs (the page's own tab a raised pill), the newest article large, then cards. */
.blog-index-title{margin:8px 0 34px;color:var(--ink);font-size:clamp(44px,5.4vw,64px);font-weight:500;letter-spacing:-.045em;line-height:1.05}
.blog-tabs{display:flex;margin:0 0 30px;padding:10px 0;overflow-x:auto;border-top:1px solid #dbe3ee;border-bottom:1px solid #dbe3ee;scrollbar-width:none}
.blog-tabs::-webkit-scrollbar{display:none}
/* Where more tabs lie past an edge, that edge darkens: the page-coloured covers scroll with the tabs and hide the shade
   once an end is reached, so a row that fits, or one scrolled to its end, shows none. No script. */
.blog-tabs{background:linear-gradient(90deg,#f6f8fc 30%,rgba(246,248,252,0)) left/44px 100% no-repeat local,linear-gradient(270deg,#f6f8fc 30%,rgba(246,248,252,0)) right/44px 100% no-repeat local,linear-gradient(90deg,rgba(16,37,78,.2),rgba(16,37,78,0)) left/22px 100% no-repeat scroll,linear-gradient(270deg,rgba(16,37,78,.2),rgba(16,37,78,0)) right/22px 100% no-repeat scroll}
.blog-tabs a{flex:none;display:flex;align-items:center;padding:12px 26px;border-right:1px solid #e6ecf4;color:var(--muted);font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .15s ease}
.blog-tabs a:last-child{border-right:0}
.blog-tabs a:hover{color:var(--ink)}
.blog-tabs a[aria-current=page]{margin-right:6px;border:0;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,37,78,.08),0 6px 18px rgba(16,37,78,.08)}
.blog-feature{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);overflow:hidden;margin:0 0 26px;border:1px solid #dbe3ee;border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s ease}
.blog-feature:hover{border-color:var(--orange)}
.blog-feature img{display:block;width:100%;height:100%;min-height:100%;aspect-ratio:1672/941;object-fit:cover;background:#0b224e}
.blog-feature-body{display:flex;flex-direction:column;padding:44px 40px 34px;background:#f8fafd}
.blog-feature-category,.blog-card-meta span{color:var(--rust);font:700 11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.blog-feature h2{margin:14px 0 16px;font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1.18;letter-spacing:-.03em}
.blog-feature p{margin:0;color:var(--text);font-size:17px;line-height:1.6}
.blog-feature-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:30px;color:var(--muted);font-size:15px}
.blog-author{display:inline-flex;align-items:center;gap:10px}
.blog-author img{width:28px;height:28px;border-radius:50%;background:#0b224e}

/* Cards: the index's other articles and an article's Keep reading. */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.blog-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #dbe3ee;border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.blog-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.blog-card img{display:block;width:100%;height:auto;aspect-ratio:836/470;background:#0b224e}
.blog-card-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 22px}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.blog-card time{color:var(--muted);font:600 11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.blog-card h2,.blog-card h3{margin:0;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.blog-card p{margin:0;color:var(--text);font-size:14.5px;line-height:1.55}
.blog-related{margin-top:56px}
.blog-related h2{margin:0 0 20px;color:var(--ink);font-size:26px;font-weight:500;letter-spacing:-.03em}
.blog-related .blog-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.blog-related .blog-card h3{font-size:16px}
.blog-related .blog-card p{display:none}

@media (max-width:820px){
  .doc-layout.blog-layout,.doc-layout.blog-layout.has-toc{grid-template-columns:minmax(0,1fr)}
  .blog-cover{margin-bottom:26px}
  .blog-index-title{margin-bottom:22px}
  .blog-tabs{margin-bottom:22px}
  .blog-tabs a{padding:10px 18px;font-size:15px}
  .blog-feature{grid-template-columns:minmax(0,1fr)}
  .blog-feature img{height:auto}
  .blog-feature-body{padding:22px 20px 22px}
  .blog-feature p{font-size:15.5px}
  .blog-feature-meta{padding-top:20px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.blog-card,.blog-feature,.blog-tabs a{transition:none}.blog-card:hover{transform:none}}