/* momoworx.com — the blog: the guides index (/blog/) and the Scriptorium
   guides (/blog/<name>). Loaded after momo.css and built on its colours, so
   light and dark follow the visitor's system like the rest of the Momo pages.
   The Cali articles keep their own look (blog/blog.css). The Scriptorium
   page and the home page load it too, for the guide cards (a.guide), so
   everything else here is kept inside .prose or names of its own. */

/* ------------------------------ an article ------------------------------ */
.post { padding: 52px 0 8px; }
.measure { max-width: 760px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .measure { padding: 0 16px; } .post { padding-top: 32px; } }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .92rem; color: var(--faint); margin: 0 0 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--line-2); }

.post-head .eyebrow { margin-bottom: 14px; }
.post-head h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: .42em; }
.post-head .lede { font-size: 1.2rem; margin: 0 0 20px; }
.byline { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; color: var(--faint); font-size: .92rem; }
.byline span[aria-hidden] { color: var(--line-2); }

.post-hero { max-width: 1040px; margin: 36px auto 0; padding: 0 24px; }
.post-hero figcaption { text-align: center; }
@media (max-width: 560px) { .post-hero { padding: 0 16px; margin-top: 26px; } }

/* the words */
.prose { font-size: 1.07rem; line-height: 1.72; padding-top: 34px; }
.prose h2 { font-size: clamp(1.45rem, 2.7vw, 1.9rem); letter-spacing: -.022em; margin: 1.85em 0 .55em; }
.prose h3 { font-size: 1.2rem; margin: 1.55em 0 .45em; }
.prose h2 + h3 { margin-top: .6em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.05em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0 0 .5em; }
.prose li::marker { color: var(--faint); }
.prose li > ul, .prose li > ol { margin: .5em 0 0; }
.prose strong, .prose b { font-weight: 650; }
.prose a { text-decoration-thickness: 1px; }
.prose code { font-size: .86em; padding: .1em .36em; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.prose pre { margin: 0 0 1.35em; padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); overflow-x: auto; font-size: .88rem; line-height: 1.6; }
.prose pre code { padding: 0; border: 0; background: none; font-size: inherit; white-space: pre; overflow-wrap: normal; }
.prose kbd { font-size: .82em; }
.prose mark { background: #fff1a8; color: #16181d; padding: 0 .15em; border-radius: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

.prose figure { margin: 2em 0; }
@media (min-width: 1000px) { .prose figure.wide { margin-left: -90px; margin-right: -90px; } }

/* tables */
.prose .table-wrap { margin: 0 0 1.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.55; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose th { font: 700 .76rem/1.3 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 600; min-width: 8.5em; }
.prose table.plain-first td:first-child { font-weight: 400; }
.prose td code { white-space: nowrap; }
@media (max-width: 560px) { .prose th, .prose td { padding: 10px 11px; } .prose td code { white-space: normal; } }

/* a note in a box */
.prose .note { margin: 1.6em 0; padding: 16px 20px; border-radius: 12px; background: var(--blue-soft); border-left: 4px solid var(--blue); font-size: 1rem; line-height: 1.65; }
.prose .note.gold { background: var(--gold-soft); border-left-color: var(--gold); }
.prose .note.green { background: var(--green-soft); border-left-color: var(--green); }
.prose .note > :last-child { margin-bottom: 0; }
.prose .note .label { display: block; font: 700 .76rem/1.2 var(--body); letter-spacing: .11em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.prose .note.gold .label { color: var(--gold); }
.prose .note.green .label { color: var(--green); }

/* numbered steps */
ol.steps { list-style: none; counter-reset: step; padding-left: 0; }
ol.steps > li { counter-increment: step; position: relative; padding-left: 46px; margin-bottom: .8em; min-height: 30px; }
ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: .02em; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font: 800 .9rem/30px var(--head); text-align: center; }

/* the sixty languages */
.prose .langs { list-style: none; padding: 0; margin: 0 0 1.2em; display: flex; flex-wrap: wrap; gap: 8px; }
.prose .langs li { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .93rem; line-height: 1.35; }
.prose .langs li.za { background: var(--gold-soft); border-color: transparent; font-weight: 600; }
.prose .langs li span { color: var(--faint); font-weight: 400; }

/* the end of an article */
.post-cta { margin: 52px 0 0; padding: 30px 32px; border-radius: var(--r-lg); background: linear-gradient(135deg, #0f4f96, #1a63b8 55%, #2a78d3); color: #fff; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; justify-content: space-between; }
.post-cta h2 { color: #fff; font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 6px; }
.post-cta p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 1rem; max-width: 46ch; }
.post-cta .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.post-cta .btn { background: #fff; color: #0f4f96; }
.post-cta .btn:hover { background: #eef4fc; color: #0f4f96; }
.post-cta .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.post-cta .btn.ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@media (max-width: 560px) { .post-cta { padding: 26px 22px; } }

.more { padding: 64px 0 88px; }
.more .head-block { margin-bottom: 26px; }
.more h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }

/* ------------------------------ guide cards ------------------------------ */
a.guide { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; transition: transform .2s, border-color .2s; }
a.guide:hover { color: var(--text); transform: translateY(-2px); border-color: var(--line-2); }
a.guide:hover h3 { color: var(--blue); }
a.guide .thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
a.guide .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
a.guide .in { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
a.guide .tag { font: 700 .74rem/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
a.guide h3 { font-size: 1.13rem; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 .45em; transition: color .2s; }
a.guide p { color: var(--muted); font-size: .94rem; line-height: 1.55; margin: 0 0 14px; }
a.guide .meta { margin-top: auto; font-size: .84rem; color: var(--faint); }

/* ------------------------------ the blog index ------------------------------ */
.blog-top { padding: 76px 0 28px; }
.blog-top h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); max-width: 18ch; }
.blog-top .lede { max-width: 64ch; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.jump a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font-weight: 600; font-size: .96rem; }
.jump a:hover { border-color: var(--faint); color: var(--text); }
.jump a img { width: 28px; height: 28px; border-radius: 8px; }
.jump a img.round { border-radius: 50%; }
.jump a .n { color: var(--faint); font-weight: 500; }

.shelf { scroll-margin-top: 84px; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; margin-bottom: 30px; }
.shelf-head > img { flex: none; width: 54px; height: 54px; border-radius: 14px; box-shadow: var(--shadow-1); }
.shelf-head > img.round { border-radius: 50%; }
.shelf-head .t { flex: 1 1 380px; min-width: 0; }
.shelf-head h2 { margin-bottom: .25em; }
.shelf-head .lede { margin: 0; font-size: 1.08rem; }
.shelf-head .go { align-self: center; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .shelf-head .go { align-self: flex-start; } }