.article-header{padding:var(--space-10) 0;text-align:center;background:var(--surface-subtle)}.article-header .category{color:var(--brand-text);text-transform:uppercase;font-weight:700;font-size:var(--text-ui-md);margin-bottom:var(--space-4)}.article-header .breadcrumbs-list{justify-content:center;margin-bottom:var(--space-3)}.article-header h1{font-size:var(--text-h1);font-weight:800;color:var(--text-strong);line-height:var(--leading-h2);margin-bottom:var(--space-5)}.article-header .author-info{display:flex;align-items:center;justify-content:center;gap:var(--space-3);color:var(--text-subtle);font-size:var(--text-small)}.article-header .author-info img{width:var(--space-10);height:var(--space-10);border-radius:var(--radius-pill);object-fit:cover}.featured-image{width:100%;height:var(--size-400px);background-size:cover;background-position:center;background-repeat:no-repeat;margin-bottom:var(--space-10)}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-8);align-items:start;padding:var(--space-10) 0}.article-content{min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--text-ui-xl);line-height:var(--leading-body);color:var(--text-strong)}.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{color:var(--text-strong);font-weight:700;margin-top:2em;margin-bottom:1em;line-height:var(--leading-h3)}.article-content h1{font-size:var(--text-ui-5xl)}.article-content h2{font-size:var(--text-ui-4xl)}.article-content h3{font-size:var(--text-ui-3xl)}.article-content h4{font-size:var(--text-ui-2xl)}.article-content h5{font-size:var(--text-ui-xl)}.article-content h6{font-size:var(--text-ui-lg)}.article-content p{margin-bottom:1.5em}.article-content img,.article-content pre,.article-content code,.article-content table,.article-content blockquote{max-width:100%;box-sizing:border-box}.article-content img{height:auto;border-radius:var(--radius-lg);margin:2em 0}.article-content pre{overflow-x:auto;background:var(--surface-muted);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--text-ui-md);margin:1.5em 0}.article-content blockquote{border-left:var(--space-1) solid var(--brand);padding-left:var(--space-6);margin:1.5em 0;font-style:italic;color:var(--text-muted)}.article-content ul,.article-content ol{margin-bottom:1.5em;margin-top:1em;padding-left:var(--space-8);line-height:var(--leading-prose)}.article-content ul{list-style-type:disc;list-style-position:outside}.article-content ol{list-style-type:decimal;list-style-position:outside}.article-content li{margin-bottom:.75em;padding-left:var(--space-2)}.article-content li::marker{color:var(--brand-text);font-weight:600}.article-content ul ul,.article-content ol ul{margin-top:.5em;margin-bottom:.5em}.article-content ul ul{list-style-type:circle}.article-content strong,.article-content b{font-weight:700;color:var(--text-strong)}.article-content em,.article-content i{font-style:italic}.article-content a{color:var(--brand-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .2s ease,text-decoration-thickness .2s ease}.article-content a:hover{color:var(--brand-hover);text-decoration-thickness:2px}.article-content code{background:var(--surface-subtle);color:var(--danger);padding:.2em .4em;border-radius:var(--radius-sm);font-size:var(--text-ui-md);font-family:Courier New,Courier,monospace}.article-content pre code{background:transparent;color:inherit;padding:0}.article-content table{width:100%;border-collapse:collapse;margin:2em 0;font-size:var(--text-small)}.article-content table th,.article-content table td{border:1px solid var(--border-subtle);padding:var(--space-3) var(--space-4);text-align:left}.article-content table th{background:var(--surface-subtle);font-weight:700;color:var(--text-strong)}.article-content table tr:hover{background:var(--surface-muted)}.sidebar{position:sticky;top:var(--space-25)}.sidebar-widget{background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-6);box-shadow:var(--shadow-md)}.sidebar-widget h4{font-size:var(--text-ui-xl);font-weight:700;color:var(--text-strong);margin-bottom:var(--space-4)}.sidebar-widget ul{list-style:none;padding:0;margin:0}.sidebar-widget li{margin-bottom:var(--space-2)}.sidebar-widget li a{color:var(--text-strong);text-decoration:none;font-size:var(--text-small);line-height:var(--leading-small);transition:color .2s ease}.sidebar-widget li a:hover{color:var(--brand-text)}.tag-chip{display:inline-block;padding:var(--size-6px) var(--space-3);background:var(--surface-subtle);color:var(--text-strong);text-decoration:none;border-radius:var(--radius-pill);font-size:var(--text-ui-md);font-weight:500;transition:background-color .2s ease,color .2s ease}.tag-chip:hover{background:var(--brand);color:var(--brand-on-brand)}.article-navigation{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);padding:var(--space-10) 0;border-top:var(--size-px) solid var(--border-subtle);margin-top:var(--space-10)}.nav-post{padding:var(--space-6);background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.nav-post .label{display:block;font-size:var(--text-ui-md);font-weight:600;color:var(--text-subtle);margin-bottom:var(--space-2);text-transform:uppercase}.nav-post a{color:var(--text-strong);text-decoration:none;font-weight:600;font-size:var(--text-ui-xl);line-height:var(--leading-ui);transition:color .2s ease}.nav-post a:hover{color:var(--brand-text)}@media(max-width:1024px){.article-layout{grid-template-columns:1fr}.sidebar{position:static}.article-navigation{grid-template-columns:1fr;gap:var(--space-4)}}@media(max-width:768px){.article-header{padding:var(--size-30px) 0}.article-header .container,.article-layout,.article-navigation{padding-left:var(--space-4);padding-right:var(--space-4);box-sizing:border-box}.article-header h1{font-size:var(--text-ui-5xl)}.featured-image{height:var(--size-250px);margin-bottom:var(--size-30px)}.article-layout{padding:var(--size-30px) var(--space-4);gap:var(--space-6)}.article-content{font-size:var(--text-ui-lg)}}.tag-chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.sidebar-widget-text{font-size:var(--text-ui-md);color:var(--text-muted);margin-bottom:var(--space-4)}.btn-primary.btn-primary--inline{display:inline-block;text-decoration:none}
