/* Haulor marketing — /blog (index + article). Builds on base.css + about.css (.ab-* header/footer, tokens). */
.bl-main{display:block;padding:56px max(var(--gutter),calc((100% - 1200px)/2)) 120px;min-height:60vh}
.bl-in{max-width:1200px;margin:0 auto}
.bl-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:48px}
.bl-h1{font-size:clamp(40px,4.4vw,64px);font-weight:300;letter-spacing:-.03em;line-height:1.04;color:var(--hl-ink)}
.bl-h1 span{display:block;color:#686b71}
.bl-empty{padding:48px;border-radius:24px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px #fff,0 8px 24px -8px rgba(13,15,23,.05);font-size:18px;line-height:1.55;color:#56595f}

/* index grid */
.bl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.bl-card{display:flex;flex-direction:column;gap:14px;height:100%;padding:28px;border-radius:24px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px #fff,0 1px 2px rgba(13,15,23,.03),0 8px 24px -8px rgba(13,15,23,.05)}
.bl-card:hover{box-shadow:inset 0 0 0 1px #fff,0 1px 2px rgba(13,15,23,.03),0 16px 32px -8px rgba(13,15,23,.1)}
.bl-card__meta,.bl-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#686b71}
.bl-card__title{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--hl-ink)}
.bl-card:hover .bl-card__title{color:var(--hl-violet)}

/* pager */
.bl-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;font-size:15px;font-weight:600}
.bl-pager a{padding:10px 20px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #ECEDEF}
.bl-pager span{color:#686b71;font-weight:500}

/* article */
.bl-art{max-width:760px;margin:0 auto}
.bl-back{display:inline-block;margin-bottom:28px;font-size:14px;font-weight:600;color:#56595f}
.bl-art__h1{margin:14px 0 0;font-size:clamp(34px,4vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1.08;color:var(--hl-ink)}
.bl-toc{margin:36px 0 0;padding:24px 28px;border-radius:20px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px #fff,0 8px 24px -8px rgba(13,15,23,.05)}
.bl-toc__h{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#56595f}
.bl-toc ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:16px;line-height:1.4}
.bl-toc a{color:var(--hl-ink)}
.bl-toc a:hover{color:var(--hl-violet)}
.bl-body{margin-top:40px;font-size:18px;line-height:1.7;color:#2b2d31;overflow-wrap:anywhere}
.bl-body h2{margin:2.2em 0 .6em;font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--hl-ink);scroll-margin-top:24px}
.bl-body h3{margin:1.8em 0 .5em;font-size:22px;font-weight:600;line-height:1.3;color:var(--hl-ink);scroll-margin-top:24px}
.bl-body h4,.bl-body h5,.bl-body h6{margin:1.6em 0 .5em;font-size:18px;font-weight:600;color:var(--hl-ink)}
.bl-body p,.bl-body ul,.bl-body ol,.bl-body blockquote,.bl-body pre,.bl-body figure,.bl-body table{margin:0 0 1.2em}
.bl-body ul,.bl-body ol{padding-left:1.4em}
.bl-body li{margin:.35em 0}
.bl-body a{color:var(--hl-violet);text-decoration:underline;text-underline-offset:3px}
.bl-body blockquote{padding:4px 0 4px 20px;border-left:3px solid var(--hl-violet);color:#56595f}
.bl-body img{height:auto;border-radius:16px}
.bl-body code{padding:2px 6px;border-radius:6px;background:#ECEDEF;font-family:'Geist Mono',ui-monospace,monospace;font-size:.9em}
.bl-body pre{padding:18px 20px;overflow-x:auto;border-radius:16px;background:var(--hl-ink);color:#e8e9eb}
.bl-body pre code{padding:0;background:none;color:inherit}
.bl-body table{display:block;overflow-x:auto;border-collapse:collapse;font-size:16px}
.bl-body th,.bl-body td{padding:10px 14px;border:1px solid #dcdde0;text-align:start}
.bl-body th{background:#f3f4f5;font-weight:600}
.bl-body details{margin:0 0 .8em;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px #ECEDEF}
.bl-body summary{cursor:pointer;font-weight:600}

@media (max-width:760px){
  .bl-main{padding:32px 20px 80px}
  .bl-grid{grid-template-columns:1fr}
  .bl-card{padding:22px}
  .bl-body{font-size:17px}
}