/* Blog article template: one format for every post (generated layout; see CLAUDE.md). Tokens only. */
.a-head{padding:64px 0 8px;background:radial-gradient(120% 80% at 88% -8%, var(--blue-50), transparent 58%), #fff}
.a-head-in{max-width:980px}
.a-back{margin-bottom:26px}
.a-back svg{transform:rotate(180deg)}
.a-back:hover svg{transform:rotate(180deg) translateX(3px)}
.a-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--muted-2)}
.a-meta span:not(.tag)::before{content:"·";margin-right:14px;color:var(--grey-100)}
.a-head h1{margin:16px 0 32px;max-width:20em}
.a-cover{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);aspect-ratio:16/8;background:var(--surface-sunken)}
.a-cover img{width:100%;height:100%;object-fit:cover}
.a-cover .cover-mz{--n:6}
.a-head-in > *{animation:enter .8s var(--ease-out) both}
.a-head-in > :nth-child(2){animation-delay:.06s}.a-head-in > :nth-child(3){animation-delay:.12s}.a-head-in > :nth-child(4){animation-delay:.2s}

.a-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;padding-top:48px;padding-bottom:96px;max-width:1040px}
.a-toc{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.a-toc-lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-300);padding:0 0 10px 14px}
.a-toc a{font-size:13.5px;line-height:1.4;color:var(--muted);padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;transition:color var(--duration-base),border-color var(--duration-base)}
.a-toc a:hover{color:var(--ink)}
.a-toc a.on{color:var(--brand-primary);font-weight:600;border-left-color:var(--brand-primary)}
.a-toc-empty{border:0}

/* body typography */
.a-body{min-width:0;max-width:44em;font-size:17.5px;line-height:1.75;color:var(--grey-700)}
.a-body > * + *{margin-top:1.15em}
.a-body h2{font-size:clamp(24px,2.6vw,30px);line-height:1.25;margin-top:2.1em;scroll-margin-top:100px;color:var(--ink)}
.a-body h3{font-size:20px;font-weight:600;line-height:1.35;margin-top:1.8em;color:var(--ink)}
.a-body h4{font-size:17px;font-weight:600;margin-top:1.6em;color:var(--ink)}
.a-body > :first-child{margin-top:0}
.a-body ul,.a-body ol{padding-left:1.3em}
.a-body li + li{margin-top:.45em}
.a-body li::marker{color:var(--brand-primary)}
.a-body a{color:var(--brand-primary);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.a-body strong{color:var(--ink)}
.a-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* summary box ("What you'll learn") */
.a-callout{margin:2em 0;padding:22px 24px;border-radius:var(--radius-lg);background:#F6F6FF;border:1px solid var(--blue-50)}
.a-callout-t{display:block;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--blue-900);margin-bottom:10px}
.a-callout ul{margin:0}
.a-callout p{margin-top:.6em}

/* pull quotes */
.a-quote{margin:2em 0;padding:4px 0 4px 24px;border-left:3px solid var(--brand-primary)}
.a-quote blockquote{font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.a-quote blockquote p + p{margin-top:.6em}
.a-quote figcaption{margin-top:12px;font-size:14px;color:var(--muted-2)}

/* media */
.a-figure{margin:2em 0}
.a-figure img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line)}
.a-figure figcaption{margin-top:10px;font-size:13.5px;color:var(--muted-2);text-align:center}
.a-video{margin:2em 0;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--heron-black);box-shadow:var(--shadow-lg)}
.a-video iframe{width:100%;height:100%;border:0;display:block}
.a-table{margin:2em 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg)}
.a-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.a-table th,.a-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.a-table tr:last-child td{border-bottom:0}
.a-table th{background:var(--surface-sunken);font-weight:600;color:var(--ink)}

@media(max-width:900px){.a-layout{grid-template-columns:minmax(0,1fr);gap:0;padding-top:32px}.a-toc{display:none}}
@media(prefers-reduced-motion:reduce){.a-head-in > *{animation:none}}