.blog-hero{padding:68px 0 56px;background:linear-gradient(120deg,#fff 25%,var(--pale) 100%);border-bottom:1px solid var(--line)}
.blog-narrow{max-width:960px}.breadcrumbs{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.78rem;margin-bottom:36px}.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}.blog-hero .eyebrow{color:var(--blue);margin-bottom:18px}.blog-hero h1{font-size:clamp(2.7rem,4.8vw,4.9rem);max-width:930px;margin-bottom:26px;overflow-wrap:anywhere}.blog-deck{font-size:1.18rem;line-height:1.7;max-width:790px;color:var(--ink)}.blog-byline{display:flex;gap:12px 28px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}.blog-byline a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}.blog-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,340px);justify-content:space-between;gap:70px;padding-block:70px 100px}.blog-content{font-size:1.04rem;min-width:0}.blog-content>p:first-child{font-size:1.15rem;color:var(--ink)}.blog-content p{line-height:1.82}.blog-content h2{font-size:2.15rem;margin:58px 0 20px}.blog-content h3{font-size:1.35rem;letter-spacing:-.02em;margin:36px 0 14px}.blog-content a{color:var(--primary-hover);text-decoration:underline;text-underline-offset:3px}.blog-content li{margin-bottom:12px}.blog-content table{margin:28px 0;min-width:600px}.blog-content .comparison{margin:28px 0}.blog-content blockquote{margin:32px 0;padding:25px 30px;border-left:4px solid var(--blue);background:var(--pale);font-size:1.1rem}.blog-content iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;margin:30px 0}.article-notice{padding:24px 26px;margin:34px 0;background:var(--pale);border-radius:12px;border-left:4px solid var(--blue)}.article-notice strong{display:block;margin-bottom:8px}.article-notice p{font-size:.9rem;margin:0}.blog-aside{align-self:start;position:sticky;top:120px;display:grid;gap:24px}.author-card,.related-card{border:1px solid var(--line);border-radius:14px;padding:27px}.author-card .eyebrow{margin-bottom:12px;color:var(--blue)}.author-card h2,.related-card h2{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:14px}.author-card p{font-size:.88rem}.related-card a{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:.86rem}.related-card a:hover{color:var(--blue)}.blog-index{padding-bottom:100px}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.blog-card{display:flex;flex-direction:column;align-items:flex-start;padding:30px;border:1px solid var(--line);border-radius:14px;transition:transform .2s,border-color .2s}.blog-card:hover{transform:translateY(-4px);border-color:#aeb8e2}.blog-card .eyebrow{color:var(--blue);margin-bottom:18px}.blog-card h2{font-size:1.55rem;line-height:1.25}.blog-card p{font-size:.9rem}.blog-card .text-link{margin-top:auto}.author-profile{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}.author-profile-card{padding:34px;background:var(--pale);border-radius:14px}.author-profile-card h1{font-size:3.7rem}.author-profile-copy h2{font-size:2.25rem;margin-top:42px}.tutorial-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;list-style:none;padding:0}.tutorial-list li{margin:0}.tutorial-list a{display:flex;justify-content:space-between;gap:15px;height:100%;padding:18px 20px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink);font-size:.9rem}.tutorial-list a:hover{border-color:var(--blue);color:var(--blue)}
@media(max-width:980px){.blog-layout{grid-template-columns:1fr;gap:45px}.blog-aside{position:static;grid-template-columns:1fr 1fr}.blog-grid{grid-template-columns:1fr 1fr}.author-profile{gap:40px}}
@media(max-width:720px){.blog-hero{padding:46px 0 40px}.blog-hero h1{font-size:clamp(2.35rem,11vw,3.5rem)}.blog-deck{font-size:1.05rem}.blog-layout{padding-block:48px 70px}.blog-content h2{font-size:1.8rem;margin-top:46px}.blog-aside,.blog-grid,.author-profile,.tutorial-list{grid-template-columns:1fr}.blog-content .comparison{overflow-x:auto}.author-profile-card h1{font-size:2.8rem}}
