/* Cronum Work's blog (scripts/blog.js), after module.css, whose frame it keeps: the top bar, the side
   menu and the footer. Its colour is Work's ultramarine, as for what belongs to all of Work. Published
   with a fingerprint by scripts/i18n.js (README.md). */
:root {
  --mod: #2438B8;
  --mod-strong: #2438B8;
  --mod-on-dark: #8C9BFF;
}

main.blog, main.post { padding-block: 36px 88px; }
.blog-head, .post-head, .cover, .prose, .try, .more { max-width: 860px; margin-inline: auto; }
.blog-head h1, .post-head h1 { margin: 0; font: 700 clamp(38px, 6.4vw, 64px)/1.02 var(--display); letter-spacing: -0.045em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.lead { margin: 18px 0 0; color: var(--fg-dim); font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; text-wrap: pretty; }
.feed { margin: 14px 0 0; font-size: 15px; }
.feed a, .back { color: var(--fg-dim); text-underline-offset: 3px; }
.back { display: inline-block; margin-bottom: 28px; font-size: 15px; text-decoration: none; }
.back::before { content: "← "; }
.back:hover { color: var(--fg); text-decoration: underline; }

/* What a post is: a guide or news, and the modules it is about */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; font-size: 14px; color: var(--fg-dim); }
.tag { padding: 5px 11px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border: 1px solid var(--rule); border-radius: 999px; color: var(--fg); font-weight: 600; text-decoration: none; }
.chip img, .chip svg { width: 18px; height: 18px; border-radius: 5px; }
.chip:hover { border-color: var(--fg-dim); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 20px 0 0; padding-bottom: 28px; border-bottom: 1px solid var(--rule); color: var(--fg-dim); font-size: 15px; }

/* The lists of posts: on the blog's page and under each post */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; margin: 44px 0 0; padding: 0; list-style: none; }
main.blog .posts { max-width: 1120px; }
/* The pictures: drawn on cream, so in the dark theme they sit as a lit card */
.cover { margin-block: 32px 8px; }
.cover img, .thumb, .prose img { display: block; width: 100%; height: auto; border-radius: 20px; background: var(--cream); }
.thumb { margin: -10px -10px 6px; width: calc(100% + 20px); max-width: none; border-radius: 18px; }
.card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); color: var(--fg); text-decoration: none; transition: transform .2s ease; }
.card a:hover { transform: translateY(-3px); }
.card a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.card .kicker { margin: 0; }
.card h2, .card h3 { margin: 4px 0 0; font: 700 25px/1.12 var(--display); letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.card p { margin: 0; color: var(--fg-dim); line-height: 1.5; }
.empty { margin: 44px 0 0; color: var(--fg-dim); font-size: 18px; }
.posts:has(li) + .empty { display: none; }

/* A post's text */
.prose { padding-top: 8px; font-size: 18px; line-height: 1.68; }
.prose > * { overflow-wrap: break-word; }
.prose h2 { margin: 52px 0 12px; font: 700 clamp(26px, 3.4vw, 32px)/1.12 var(--display); letter-spacing: -0.03em; text-wrap: balance; hyphens: auto; }
.prose h3 { margin: 34px 0 8px; font: 700 21px/1.25 var(--display); letter-spacing: -0.02em; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose figure { margin: 0 0 20px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 8px; padding-left: 4px; }
.prose li::marker { color: var(--accent); font-weight: 600; }
.prose a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 600; }
.prose blockquote { padding: 18px 22px; border-left: 4px solid var(--accent); border-radius: 0 16px 16px 0; background: var(--accent-wash); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--rule); font: 500 .86em/1 var(--mono); overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; padding: 18px 20px; border-radius: 16px; background: var(--panel); color: var(--cream); font-size: 15px; line-height: 1.55; }
.prose pre code { padding: 0; background: none; font-size: inherit; line-height: inherit; overflow-wrap: normal; }
.prose figure { margin: 28px 0; }
.prose figcaption { margin-top: 8px; color: var(--fg-dim); font-size: 15px; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--rule); }
/* What you say to your AI, set apart as in a chat */
.prose .ask { margin: 0 0 20px; padding: 16px 20px; border-radius: 20px 20px 20px 6px; background: var(--surface); box-shadow: var(--shadow); font-size: 17px; }
.prose .ask::before { content: "›"; margin-right: 10px; color: var(--accent); font-weight: 700; }

/* After each post: try it */
.try { margin-top: 56px; padding: 32px; border-radius: 28px; background: var(--work); color: var(--on-work); }
.try h2 { margin: 0; font: 700 clamp(26px, 3.4vw, 32px)/1.1 var(--display); letter-spacing: -0.03em; }
.try p { margin: 10px 0 0; opacity: .9; }
.try .ctas { margin-top: 22px; }
.try .btn { border-color: var(--on-work); background: var(--on-work); color: var(--work); }
.try .btn.ghost { background: transparent; color: var(--on-work); }
.try .btn:focus-visible { outline-color: var(--on-work); }
.more { margin-top: 64px; }
.more h2 { margin: 0; font: 700 26px/1.1 var(--display); letter-spacing: -0.03em; }
.more .posts { margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.more .card h3 { font-size: 20px; }
.more .card p { display: none; }

@media (max-width: 520px) {
  main.blog, main.post { padding-top: 20px; }
  .prose { font-size: 17px; }
  .card a { padding: 22px; }
  .try { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .card a { transition: none; }
}