/* crewsoft.id blog (served by the crewsoft-blog Worker; same tokens as /assets/css/site.css) */
.blog-wrap,.post{max-width:760px;margin:0 auto;padding:48px 24px 64px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;font-size:14px;line-height:20px;color:#4A5B70}
.crumbs a{color:#4A5B70}.crumbs a:hover{color:#0B1B2E}
.blog h1{margin:0 0 12px;font-size:clamp(32px,4.4vw,46px);line-height:1.12;font-weight:800;letter-spacing:-0.02em;text-wrap:balance;color:#0B1B2E}
.blog .meta{margin:0 0 8px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;line-height:20px;color:#4A5B70}
.blog .lead{margin:0 0 32px;font-size:19px;line-height:30px;color:#4A5B70}
.post-head{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #D5DDE6}
.post-head .lead{margin:8px 0 0}
.prose{font-size:17px;line-height:29px;color:#0B1B2E}
.prose>:first-child{margin-top:0}
.prose>p:first-child{font-size:19px;line-height:31px;color:#0B1B2E}
.prose h2{margin:44px 0 12px;font-size:26px;line-height:34px;font-weight:800;letter-spacing:-0.01em;text-wrap:balance;scroll-margin-top:24px}
.prose h3{margin:32px 0 8px;font-size:20px;line-height:28px;font-weight:700;scroll-margin-top:24px}
.prose h4,.prose h5,.prose h6{margin:24px 0 8px;font-size:17px;line-height:26px;font-weight:700}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin:6px 0}
.prose li>p{margin:0 0 8px}
.prose ul:has(>li>input[type=checkbox]){list-style:none;padding-left:0}
.prose li:has(>input[type=checkbox]){position:relative;padding-left:30px}
.prose li>input[type=checkbox]{position:absolute;left:2px;top:6px;margin:0;width:16px;height:16px;accent-color:#08697A}
.prose strong{font-weight:700}
.prose a{color:#B8460B;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.prose a:hover{color:#8F3609}
.prose blockquote{margin:0 0 18px;padding:12px 18px;border-left:3px solid #F2661C;background:#F2F5F8;border-radius:0 10px 10px 0}
.prose blockquote>:last-child{margin-bottom:0}
.prose code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.88em;background:#EEF2F6;padding:1px 6px;border-radius:6px}
.prose pre{margin:0 0 18px;padding:14px 16px;background:#0F2A4A;color:#FFFFFF;border-radius:10px;overflow-x:auto;font-size:14px;line-height:22px}
.prose pre code{background:none;padding:0;color:inherit;font-size:inherit}
.prose hr{border:0;border-top:1px solid #D5DDE6;margin:32px 0}
.prose img{display:block;max-width:100%;height:auto;margin:8px 0 20px;border-radius:10px}
.prose figure{margin:28px auto 30px;max-width:600px}
.prose figure img{width:100%;margin:0;border-radius:14px;border:1px solid #D5DDE6;background:#F2F5F8}
.prose figcaption{margin:10px 2px 0;font-size:14px;line-height:21px;color:#4A5B70;text-wrap:pretty}
.post-hero{margin:0 0 32px}
.post-hero img{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover;border-radius:16px;background:#0F2A4A}
.table-wrap{overflow-x:auto;margin:8px 0 24px;border:1px solid #D5DDE6;border-radius:10px;-webkit-overflow-scrolling:touch}
.table-wrap:focus-visible{outline:2px solid #C94F0F;outline-offset:2px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px;font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid #D5DDE6}
.prose thead th{background:#F2F5F8;border-top:0;font-weight:700}
.post-cta{margin-top:48px;padding:28px;border-radius:16px;background:#0F2A4A;color:#FFFFFF}
.post-cta .eyebrow{margin:0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#FF8A4C}
.post-cta h2{margin:8px 0;font-size:24px;line-height:32px;font-weight:800;color:#FFFFFF}
.post-cta p{margin:0 0 16px;color:#DCE6F0}
.post-cta .btns{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.post-cta a:focus-visible{outline-color:#F2661C}
.btn-ghost-dark{border:1px solid #B9C8DA;color:#FFFFFF}.btn-ghost-dark:hover{border-color:#FFFFFF;color:#FFFFFF}
.related{max-width:760px;margin:0 auto;padding:0 24px 80px}
.related h2{margin:0 0 16px;font-size:22px;line-height:30px;font-weight:800}
.post-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.post-card{position:relative;height:100%;display:flex;flex-direction:column;padding:0;border:1px solid #D5DDE6;border-radius:16px;background:#FFFFFF;overflow:hidden}
.pc-img{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover;background:#0F2A4A}
.pc-body{padding:18px 20px 20px}
.post-card:hover{border-color:#7B8CA0}
.post-card h2,.post-card h3{margin:4px 0 6px;font-size:21px;line-height:29px;font-weight:700;text-wrap:balance}
.post-card h2 a,.post-card h3 a{color:#0B1B2E;text-decoration:none}
.post-card h2 a::after,.post-card h3 a::after{content:'';position:absolute;inset:0;border-radius:16px}
.post-card a:focus-visible::after{outline:2px solid #C94F0F;outline-offset:2px}
.post-card p{margin:0;color:#4A5B70}
.post-card .meta{margin:0}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:32px}
.btns-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.draft-note{max-width:760px;margin:24px auto 0;padding:12px 16px;border-radius:10px;background:#FFF3EB;color:#8F3609;font-weight:600}
@media (max-width:600px){.blog-wrap,.post{padding:32px 20px 48px}.prose{font-size:16px;line-height:27px}.prose>p:first-child{font-size:17px;line-height:28px}.prose h2{font-size:22px;line-height:30px;margin-top:36px}.post-cta{padding:22px}}