/* Blog (/blog/). Reuses the tokens and idioms of site.css; loaded after it on blog pages only. */
.blog-main{max-width:1100px}
/* Hero band on the blog index / category pages: the LP hero photo with a dark wash, title in paper white */
.blog-hero{position:relative;overflow:hidden;background:#1c1614;color:#f4f0e9;border-bottom:1px solid rgba(28,22,20,.1)}
.blog-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:saturate(.55) contrast(1.02) brightness(.72)}
.blog-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,11,12,.82) 0%,rgba(20,11,12,.62) 55%,rgba(20,11,12,.35) 100%)}
.blog-hero-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(20px,5vw,48px) clamp(44px,6vw,84px)}
.aio-page .blog-hero-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 16px;color:#e2c59b;font-family:var(--sync-latin);font-size:13px;letter-spacing:.2em}.blog-hero-eyebrow::before{content:"";width:28px;height:1px;background:#e2c59b}
.aio-page .blog-hero h1{margin:0;font-family:var(--sync-serif);font-weight:700;font-size:clamp(26px,3.8vw,44px);line-height:1.45;letter-spacing:.02em;color:#f7f2ea;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.aio-page .blog-hero-lead{margin:18px 0 0;max-width:720px;font-size:clamp(13.5px,1.5vw,15.5px);line-height:2;color:rgba(244,240,233,.88)}
.blog-main .aio-breadcrumb{margin-bottom:clamp(18px,2.4vw,28px)}
.blog-intro{max-width:820px}
.blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(22px,3vw,32px) 0 clamp(30px,4vw,44px)}
.aio-main .blog-cats a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--sync-line);background:var(--sync-card);color:var(--sync-text);font-size:13px;line-height:1.4;text-decoration:none;white-space:nowrap}
.aio-main .blog-cats a span{font-family:var(--sync-latin);font-size:13px;color:var(--sync-muted)}
.aio-main .blog-cats a:hover{border-color:var(--sync-red);color:var(--sync-red)}
.aio-main .blog-cats a.is-active{background:var(--sync-red);border-color:var(--sync-red);color:#f7ece9}.aio-main .blog-cats a.is-active span{color:#f7ece9}
.blog-cat-desc{max-width:820px;margin:0 0 clamp(26px,3vw,36px);font-size:14px;line-height:2;color:var(--sync-sub)}
/* Index list: one column, thumbnail left */
.blog-list{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.blog-item{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(18px,2.6vw,32px);padding:clamp(18px,2.4vw,26px);background:var(--sync-card);border:1px solid var(--sync-line);border-top:3px solid var(--sync-red)}
.blog-thumb{display:block;aspect-ratio:1200/630;overflow:hidden;border:1px solid var(--sync-line);background:#fff}
.blog-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.blog-item-body{display:flex;flex-direction:column;min-width:0}
.aio-main .blog-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 10px;font-size:12.5px;line-height:1.6;color:var(--sync-muted)}
.aio-main .blog-item-meta time{font-family:var(--sync-latin);font-size:14px;letter-spacing:.06em;color:var(--sync-muted)}
.aio-main .blog-item-meta a.blog-cat{color:var(--sync-red);font-weight:600;text-decoration:none;letter-spacing:.02em}.aio-main .blog-item-meta a.blog-cat:hover{text-decoration:underline}
.aio-main .blog-item h2,.aio-main .blog-item h3{margin:0 0 10px;padding:0;border:0;font-family:var(--sync-serif);font-weight:700;font-size:clamp(17px,2vw,21px);line-height:1.6}
.aio-main .blog-item h2 a,.aio-main .blog-item h3 a{color:var(--sync-ink);text-decoration:none}.aio-main .blog-item h2 a:hover,.aio-main .blog-item h3 a:hover{color:var(--sync-red)}
.aio-main .blog-excerpt{margin:0;font-size:13.5px;line-height:1.95;color:var(--sync-sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aio-main .blog-item .aio-card-link{margin-top:auto;padding-top:16px;font-size:13px;font-weight:600;letter-spacing:.03em;text-decoration:none}.aio-main .blog-item .aio-card-link:hover{text-decoration:underline}
@media(max-width:700px){.blog-item{grid-template-columns:minmax(0,1fr)}.blog-thumb{max-width:100%}}
/* Pager */
.blog-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:clamp(34px,4vw,48px) 0 0;font-size:13.5px}
.aio-main .blog-pager a,.aio-main .blog-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:10px 12px;border:1px solid var(--sync-line);background:var(--sync-card);color:var(--sync-text);text-decoration:none;line-height:1.3}
.aio-main .blog-pager a:hover{border-color:var(--sync-red);color:var(--sync-red)}
.aio-main .blog-pager .is-current{background:var(--sync-red);border-color:var(--sync-red);color:#f7ece9}
.aio-main .blog-pager .blog-pager-arrow{padding:10px 16px}
/* Article */
.aio-main .aio-eyebrow a{color:inherit;text-decoration:none}.aio-main .aio-eyebrow a:hover{text-decoration:underline}
.aio-main .blog-byline{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 6px}
.blog-summary{margin:28px 0 0;padding:22px clamp(20px,3vw,30px);background:#fff;border:1px solid var(--sync-line);border-top:3px solid var(--sync-red)}
.aio-main .blog-summary-title{margin:0 0 12px;font-family:var(--sync-serif);font-weight:600;font-size:15px;color:var(--sync-ink)}
.blog-summary dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0}
.blog-summary dt{font-size:13px;font-weight:700;line-height:1.9;color:var(--sync-red);white-space:nowrap}
.blog-summary dd{margin:0;font-size:14px;line-height:1.9;color:var(--sync-text)}
@media(max-width:520px){.blog-summary dl{grid-template-columns:minmax(0,1fr)}.blog-summary dt{line-height:1.4}.blog-summary dd{margin-bottom:6px}}
.blog-body>p:first-child{margin-top:28px}
.aio-main .blog-body h3{margin:28px 0 12px;padding-left:12px;border-left:2px solid var(--sync-line)}
.aio-main .blog-body h4{margin:22px 0 8px;font-family:var(--sync-serif);font-size:16px;color:var(--sync-ink)}
.aio-main .blog-body blockquote{margin:22px 0;padding:16px 22px;border-left:3px solid var(--sync-red);background:var(--sync-card);color:var(--sync-sub)}.aio-main .blog-body blockquote p{margin:0;font-size:14px}
.aio-main .blog-body hr{border:0;border-top:1px solid var(--sync-line);margin:40px 0}
.aio-main .blog-body code{font-size:.92em;padding:2px 6px;background:var(--sync-alt);border-radius:2px}
.aio-main .blog-body pre{overflow-x:auto;padding:16px 20px;background:var(--sync-alt);font-size:13px;line-height:1.7}.aio-main .blog-body pre code{padding:0;background:none}
.aio-main .blog-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:36px 0 0;font-size:12.5px;color:var(--sync-muted)}
.aio-main .blog-tags a{padding:5px 10px;border:1px solid var(--sync-line);background:var(--sync-card);color:var(--sync-text);text-decoration:none}.aio-main .blog-tags a:hover{color:var(--sync-red);border-color:var(--sync-red)}
.blog-author{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;margin:clamp(40px,5vw,56px) 0 0;padding:clamp(20px,2.6vw,28px);background:var(--sync-card);border:1px solid var(--sync-line)}
.blog-author img{width:96px;height:120px;object-fit:cover;object-position:50% 30%;border-left:3px solid var(--sync-red)}
.aio-main .blog-author-name{margin:0 0 6px;font-family:var(--sync-serif);font-weight:600;font-size:16px;color:var(--sync-ink)}.aio-main .blog-author-name small{display:block;font-family:var(--sync-sans);font-weight:400;font-size:12px;color:var(--sync-muted)}
.aio-main .blog-author p{margin:0;font-size:13.5px;line-height:1.95;color:var(--sync-sub)}
@media(max-width:520px){.blog-author{grid-template-columns:minmax(0,1fr)}.blog-author img{width:80px;height:100px}}
.blog-related{margin-top:clamp(48px,6vw,68px)}
.blog-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(16px,2vw,22px)}
.blog-related-grid .blog-item{grid-template-columns:minmax(0,1fr);gap:12px;padding:0 0 18px;border-top:0;background:var(--sync-card)}
.blog-related-grid .blog-thumb{border:0;border-bottom:1px solid var(--sync-line)}
.blog-related-grid .blog-item-body{padding:0 18px}
.aio-main .blog-related-grid .blog-item h3{font-size:15.5px;line-height:1.6;font-weight:600}
.blog-prevnext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:clamp(28px,3.4vw,40px) 0 0}
.aio-main .blog-prevnext a{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--sync-line);background:var(--sync-card);color:var(--sync-text);text-decoration:none;font-size:13.5px;line-height:1.6}
.aio-main .blog-prevnext a:hover{border-color:var(--sync-red);color:var(--sync-red)}
.aio-main .blog-prevnext a span{font-size:11.5px;letter-spacing:.08em;color:var(--sync-muted)}
.aio-main .blog-prevnext .is-next{text-align:right;align-items:flex-end}
@media(max-width:520px){.blog-prevnext{grid-template-columns:minmax(0,1fr)}}
.aio-main .blog-training{margin:16px 0 0;font-size:13.5px;text-align:center;color:var(--sync-sub)}
.blog-about{margin-top:clamp(44px,5vw,60px);padding:clamp(22px,3vw,30px);background:var(--sync-card);border:1px solid var(--sync-line)}
.aio-main .blog-about h2{margin:0 0 12px;padding:0;border:0;font-size:18px}.aio-main .blog-about p{margin:0;font-size:14px;line-height:1.95;color:var(--sync-sub)}
.aio-main .blog-home-index .lp-index-card ul li a{color:inherit}
@media print{.blog-cats,.blog-pager,.blog-related,.blog-prevnext,.blog-author{display:none}}
.blog-notes{margin:28px 0 0;padding:18px clamp(18px,2.4vw,24px);background:#fff;border:1px solid var(--sync-line);border-left:3px solid #e2c59b}
.aio-main .blog-notes-title{margin:0 0 8px;font-family:var(--sync-serif);font-weight:600;font-size:14px;color:var(--sync-ink)}
.blog-notes ul{list-style:none;margin:0;padding:0}.aio-main .blog-notes li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:13.5px;line-height:1.8}.aio-main .blog-notes li+li{margin-top:4px}
.aio-main .blog-notes li span{font-family:var(--sync-latin);font-size:12px;color:var(--sync-muted)}
.blog-cover{margin:26px 0 0}.blog-cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border:1px solid var(--sync-line)}
