/* Reading pages extend the existing Open Design palette and shared public shell. */
.blog-list-intro{padding:72px 0 46px;border-bottom:1px solid var(--line);animation:blog-enter .32s ease both}
.blog-list-intro h1{max-width:760px;font-size:clamp(36px,4.6vw,56px)}
.blog-list-intro .lead{max-width:660px;margin-bottom:0}
.blog-list-section{padding:20px 0 90px}
.blog-post-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;padding:42px 0;border-bottom:1px solid var(--line)}
.blog-post-category{color:var(--muted);font-size:12px;font-weight:650;padding-top:5px}
.blog-post-date,.blog-byline{color:var(--muted);font-size:13px}
.blog-post-date{margin-bottom:12px}
.blog-post-card h2{font-size:clamp(27px,3vw,36px);max-width:760px;line-height:1.3;margin-bottom:17px}
.blog-post-card h2 a{text-decoration:none}
.blog-post-card h2 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.blog-post-card p{max-width:650px}
.blog-read-link{display:inline-flex;gap:24px;align-items:center;font-size:14px;font-weight:650;text-decoration:none}
.blog-read-link span{transition:transform .18s ease}
.blog-read-link:hover span{transform:translate(3px,-2px)}
.blog-article-shell{max-width:1000px;padding-top:30px;padding-bottom:72px}
.blog-breadcrumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:38px}
.blog-breadcrumb a{color:var(--muted);text-decoration:none}
.blog-article{max-width:780px;margin-inline:auto}
.blog-article-header{animation:blog-enter .32s ease both;margin-bottom:34px}
.blog-article-header h1{font-size:clamp(34px,4.4vw,49px);line-height:1.2;letter-spacing:-1.6px;margin-bottom:25px}
.blog-byline{display:flex;flex-wrap:wrap;gap:8px 25px;padding-top:18px;border-top:1px solid var(--line)}
.blog-prose{font-size:17px;line-height:1.85;overflow-wrap:anywhere}
.blog-prose p{margin:0 0 21px}
.blog-introduction>p:first-child{font-size:21px;line-height:1.7;color:var(--ink)}
.blog-prose ul{margin-bottom:24px;padding-left:24px}
.blog-prose li{padding-left:3px;margin-bottom:12px}
.blog-prose h2{font-size:clamp(25px,3vw,31px);line-height:1.4;letter-spacing:-.7px;margin-bottom:23px}
.blog-prose h3{font-size:20px;line-height:1.45;margin:30px 0 18px}
.blog-prose blockquote{margin:24px 0;padding:20px 24px;border-inline-start:3px solid var(--ink);background:var(--soft)}
.blog-prose blockquote p:last-child{margin-bottom:0}
.blog-prose code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.84em;background:var(--soft);padding:2px 4px;border-radius:3px;white-space:normal;overflow-wrap:anywhere}
.blog-article-section{padding-top:45px;scroll-margin-top:24px}
.blog-toc{margin:35px 0 4px;border-block:1px solid var(--line);font-size:14px}
.blog-toc summary{padding:18px 0;cursor:pointer;font-weight:650;color:var(--ink)}
.blog-toc ol{padding-left:23px;margin:0 0 22px}
.blog-toc[open] ol{animation:blog-enter .18s ease both}
.blog-toc a{color:var(--muted);text-decoration:none}
.blog-toc a:hover{color:var(--ink);text-decoration:underline}
.blog-table-wrap{overflow-x:auto;overscroll-behavior-inline:contain;margin:25px 0 28px;border:1px solid var(--line);border-radius:6px}
.blog-table-wrap table{min-width:560px;font-size:14px;line-height:1.65}
.blog-table-wrap th{text-transform:none;letter-spacing:0;font-size:12px;color:var(--ink);line-height:1.55}
.blog-table-wrap th,.blog-table-wrap td{padding:15px 16px;width:33.333%;min-width:150px}
.blog-table-wrap td p{margin-bottom:0}
.blog-table-wrap tbody tr:last-child td{border-bottom:0}
.blog-next-step{margin-top:54px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);display:flex;gap:28px;align-items:center;justify-content:space-between;background:var(--soft)}
.blog-next-step h2{font-size:23px;letter-spacing:-.4px;line-height:1.4;margin-bottom:10px}
.blog-next-step p{font-size:14px;max-width:520px;margin:0}
.blog-next-step .button{flex-shrink:0;max-width:280px;transition:background .15s,transform .15s}
.blog-next-step .button:hover{transform:translateY(-1px)}
.blog-back-link{font-size:13px;margin-top:27px;margin-bottom:0}
.blog-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes blog-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:820px){.blog-list-intro{padding:45px 0 32px}.blog-list-section{padding-bottom:55px}.blog-post-card{grid-template-columns:1fr;gap:14px;padding:30px 0}.blog-article-shell{padding-top:24px;padding-bottom:45px}.blog-breadcrumb{margin-bottom:27px}.blog-article-header h1{letter-spacing:-1px;font-size:clamp(31px,7vw,42px)}.blog-prose{font-size:16px;line-height:1.9}.blog-introduction>p:first-child{font-size:19px}.blog-article-section{padding-top:34px}.blog-prose blockquote{padding:17px 18px}.blog-next-step{flex-direction:column;align-items:flex-start;padding:23px;gap:20px}.blog-next-step .button{max-width:100%}.blog-byline{font-size:12px;gap:8px 18px}}
@media(prefers-reduced-motion:reduce){.blog-list-intro,.blog-article-header,.blog-toc[open] ol{animation:none}.blog-read-link span,.blog-next-step .button{transition:none}.blog-read-link:hover span,.blog-next-step .button:hover{transform:none}}

/* Balance translated headlines and make section navigation available before the introduction. */
.blog-list-intro h1,.blog-article-header h1{text-wrap:balance}
.blog-toc{margin:0 0 30px}

.blog-table-wrap:focus-visible{outline:3px solid #7189ae;outline-offset:4px}