/* Blog-only styles. Header, footer, tokens and buttons come from the landing /assets/site.css, generic content styles from /assets/seo.css. */
.seo-article{max-width:850px;overflow-wrap:anywhere}
.seo-article h2{margin-top:44px}.seo-article h3{margin-top:30px}
.seo-article blockquote{margin:24px 0;padding:2px 20px;border-left:4px solid var(--purple);color:var(--seo-body)}
.seo-article li{margin:7px 0}
.seo-date{font-size:14px;color:var(--muted)}
.seo-back{margin-top:36px}
.seo-card-cover,.seo-post-cover{display:block;width:100%;height:auto;max-width:100%;object-fit:cover;background:var(--surface2);border-radius:12px}
.seo-card-cover{aspect-ratio:40/21;margin:0 0 18px}
.seo-post-cover{aspect-ratio:40/21;max-width:960px;margin:28px 0;border:1px solid var(--line)}
.seo-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0;max-width:850px;font-size:14px;color:var(--muted)}
.seo-pagination>*{flex:1}.seo-pagination>:nth-child(2){text-align:center}.seo-pagination>:last-child{text-align:right}
.blog-search{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:850px;margin:28px 0 8px}
.blog-search-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blog-search-field{position:relative;flex:1 1 280px;min-width:0}
.blog-search-field .ui-icon{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--muted)}
.blog-search-input{width:100%;height:52px;padding:0 16px 0 44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .25s,box-shadow .25s}
.blog-search-input::placeholder{color:var(--muted)}
.blog-search-input:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft)}
.blog-search-button{height:52px;padding:0 26px;border-radius:12px;background:#7950e9;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}
.blog-search-button:hover{transform:translateY(-2px);box-shadow:0 8px 22px #7950e92a}
.blog-search-reset{font-size:14px;color:var(--muted)}
.blog-search-status{margin:12px 0 0;font-size:15px;color:var(--muted)}
@media(max-width:650px){.seo-pagination{flex-wrap:wrap}.seo-pagination>:nth-child(2){order:-1;flex-basis:100%}.blog-search-input{flex-basis:100%}.blog-search-field{flex-basis:100%}.blog-search-button{flex:1}}