/* Blog uses the shared site typography, blue brand and public menu. */
:root{--text:#252a31;--muted:#4d5964;--blue:#1685c5;--tag-bg:#e4f5ff;--tag-ink:#167caf;--surface-soft:#f4f8fb;--border:#dce7ed;--cloud:#eef9ff}
html[data-theme=dark]{--page:#171a20;--surface:#222831;--surface-soft:#283846;--text:#edf1f5;--muted:#bdc7d1;--blue:#69c9ff;--tag-bg:#213d50;--tag-ink:#7ed2ff;--border:#3d5366;--cloud:#263e50}
.blog-header{z-index:40;background:var(--surface);backdrop-filter:none}
.blog-header-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px 0;position:relative}
.blog-brand{display:flex;align-items:center;gap:7px;flex-shrink:0;color:#27aff5;text-decoration:none;font:800 12px/1.12 var(--ed-font-brand,Unbounded,sans-serif);letter-spacing:-.055em}
.blog-brand img{width:30px;height:30px;flex:0 0 30px}
.blog-desktop-nav{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:600}
.blog-desktop-nav a{text-decoration:none;padding:12px 0;white-space:nowrap}
.blog-desktop-nav a[aria-current]{color:var(--blue);box-shadow:0 2px var(--blue)}
.blog-desktop-nav .nav-contact-trigger{font:inherit;color:inherit;padding:12px 0;min-height:0}
.blog-desktop-nav .nav-contact-panel a{padding:9px 12px;white-space:normal}
.blog-header-tools{position:relative;display:flex;gap:8px;align-items:center}
.blog-header-tools .theme-toggle,.blog-header-tools .site-menu-toggle,.blog-search summary{width:42px;height:42px;min-height:42px;display:grid;place-content:center;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:none;cursor:pointer}
.blog-search summary svg{width:21px;height:21px}
.blog-header-tools .site-menu-toggle{position:static}
@media(min-width:900px){
 .blog-header-tools .site-menu-toggle:not(.site-menu-toggle--article){width:112px;height:44px;display:flex;gap:10px}
 .blog-header-tools .site-menu-toggle:not(.site-menu-toggle--article) .site-menu-toggle__label{display:block}
 .blog-header-tools .site-menu-toggle[aria-expanded=true]{width:44px}
 body:has(>.site-menu-toggle--article) .blog-header-inner{padding-right:168px}
}
.blog-header-tools .site-menu-toggle[aria-expanded=true]{position:fixed;top:8px;right:24px;z-index:102}
.blog-search form{top:calc(100% + 18px);right:0;width:min(520px,calc(100vw - 48px))}
.blog-search button{background:var(--tag-bg);color:var(--tag-ink);font-weight:800}
.blog-search summary:hover,.blog-search[open] summary{border-color:#91d5fa;background:var(--cloud)}
body[data-page=home] .hero{grid-template-columns:minmax(0,1fr) 76px;gap:14px 24px;padding:28px 0 24px;align-items:start}
body[data-page=home] .hero h1{font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.045em}
body[data-page=home] .hero .lead{font-size:17px;max-width:840px;line-height:1.55;margin:12px 0 0}
body[data-page=home] .hero-photo{width:76px;grid-row:1;grid-column:2;border-radius:16px;box-shadow:none}
.starter{padding:0 0 26px}
.starter-fold{border:1px solid #c7e9fb;border-radius:12px;background:#f4fbff;overflow:hidden}
.starter-fold>summary{display:grid;grid-template-columns:minmax(0,1fr) auto 8px;align-items:center;gap:18px;min-height:58px;padding:16px 18px;list-style:none;font-size:18px;line-height:1.4;font-weight:700;cursor:pointer}
.starter-fold>summary::-webkit-details-marker{display:none}
.starter-fold>summary:hover{background:var(--cloud)}
.fold-action{font-size:13px;font-weight:500;color:var(--tag-ink);white-space:nowrap}
.fold-chevron{width:8px;height:8px;border-right:2px solid #27aff5;border-bottom:2px solid #27aff5;transform:rotate(45deg);margin:0 3px 4px 0}
.starter-fold[open] .fold-chevron{transform:rotate(225deg);margin-bottom:-4px}
.starter-fold[open]>summary{border-bottom:1px solid var(--border)}
.starter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:20px}
.starter-card{min-width:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.starter-card .card-title{font-size:22px}
.starter-card .card-copy{-webkit-line-clamp:2;font-size:14px}
.articles-section{padding-top:24px}
.catalog-title{margin:0 0 22px;font-size:clamp(25px,2.5vw,32px);line-height:1.15;letter-spacing:-.04em}
.categories{margin:0 0 24px;gap:8px}
.categories a{border:1px solid transparent;border-radius:10px;background:var(--surface-soft);color:var(--text);font-size:13px;min-height:42px;padding:8px 11px}
.categories a:hover,.categories a.active{background:var(--tag-bg);border-color:#91d5fa;color:var(--tag-ink);box-shadow:none}
.article-grid{gap:30px 28px}
.article-card{padding:0;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:none}
.card-visual{border-radius:0;background:var(--surface-soft)}
.card-visual img{display:block;object-fit:contain;padding:8px;transform:none;transition:none}
.card-link:hover .card-visual img{transform:none}
.card-body{padding:18px;gap:10px}
.card-tag,html[data-theme=dark] .card-tag{width:max-content;max-width:100%;padding:5px 8px;border:0;border-radius:7px;background:var(--tag-bg);color:var(--tag-ink);font-size:12px;font-weight:700;letter-spacing:0;text-transform:none}
.card-title{color:var(--text);font-size:24px;line-height:1.22;letter-spacing:-.035em}
.card-link:hover .card-title{color:var(--text)}
.card-copy{-webkit-line-clamp:3;font-size:15px;line-height:1.55}
.read-mark{display:block;color:#26835a;font-size:12px;font-weight:700;margin-top:5px}
html[data-theme=dark] .read-mark{color:#9ce8b4}
html[data-theme=dark] .starter-fold{background:#213341;border-color:var(--border)}
.article-card:focus-within,.starter-card:focus-within{outline:2px solid #27aff5;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 .article-card,.starter-card{transition:transform .18s ease,box-shadow .18s ease}
 .article-card:hover,.article-card:focus-within{transform:translateY(-3px);box-shadow:0 12px 28px -14px rgba(12,91,136,.32)}
 .starter-card:hover{transform:translateY(-2px);box-shadow:0 9px 22px -14px rgba(12,91,136,.32)}
}
@media(max-width:1120px){.blog-desktop-nav{gap:16px}}
@media(min-width:1001px) and (max-width:1200px){.blog-header-inner{gap:12px}.blog-desktop-nav{gap:12px;font-size:12px}}
@media(max-width:1000px){.blog-desktop-nav{display:none}.blog-header-inner{gap:12px}}
@media(max-width:920px){.starter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:640px){
 .shell,.article-shell{width:calc(100% - 48px)}
 .blog-header-inner{gap:10px}
 .blog-brand{font-size:10.5px;gap:5px}.blog-brand img{width:26px;height:26px;flex-basis:26px}
 .blog-header-tools{gap:4px;flex-shrink:0}
 .blog-header-tools .theme-toggle,.blog-header-tools .site-menu-toggle,.blog-search summary{width:40px;height:40px;min-height:40px}
 .blog-header-tools .site-menu-bars,.blog-header-tools .site-menu-bars span{width:21px!important}
 body[data-page=home] .hero{grid-template-columns:minmax(0,1fr) 60px;gap:14px 16px;padding:24px 0}
 body[data-page=home] .hero-copy{display:contents}
 body[data-page=home] .hero h1{font-size:28px;grid-row:1;grid-column:1}
 body[data-page=home] .hero-photo{width:60px;grid-row:1;border-radius:6px}
 body[data-page=home] .hero .lead{grid-column:1/-1;font-size:16px;margin:0}
 .starter{padding:0 0 24px}
 .starter-fold>summary{grid-template-columns:minmax(0,1fr) 8px;gap:12px;min-height:56px;font-size:16px;padding:14px}
 .fold-action{grid-column:1;grid-row:2;font-size:12px;line-height:1.1;margin-top:-4px}
 .fold-chevron{grid-column:2;grid-row:1/3;align-self:center}
 .starter-grid{grid-template-columns:1fr;gap:0;margin:0;counter-reset:starter}
 .starter-card{counter-increment:starter;border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--surface)}
 .starter-card:last-child{border-bottom:0}
 .starter-card .card-link{display:grid;grid-template-columns:24px minmax(0,1fr) 14px;align-items:start;gap:10px;padding:14px}
 .starter-card .card-link::before{content:counter(starter);color:var(--muted);font-size:12px;font-weight:800;padding-top:2px}
 .starter-card .card-link::after{content:'›';color:#559fc9;font-size:17px;line-height:1.4}
 .starter-card .card-visual,.starter-card .card-tag,.starter-card .card-copy{display:none}
 .starter-card .card-body{padding:0;gap:0}
 .starter-card .card-title{font-size:16px;line-height:1.35;letter-spacing:-.02em;margin:0}
 .catalog-title{font-size:24px;margin-bottom:12px}
 .categories a{font-size:12px}
 .card-title{font-size:22px}
 html[data-starter-thumbnails=true] .starter-card .card-link{grid-template-columns:64px minmax(0,1fr) 14px}
 html[data-starter-thumbnails=true] .starter-card .card-link::before{display:none}
 html[data-starter-thumbnails=true] .starter-card .card-visual{display:block;width:64px;height:54px;aspect-ratio:auto;border-radius:6px}
 html[data-starter-thumbnails=true] .starter-card .card-visual img{padding:3px}
}
@media(prefers-reduced-motion:reduce){.article-card,.starter-card{transition:none;transform:none!important}}
