.blog-list-page__body{gap:var(--space-3);padding-block:var(--space-3) var(--space-4);flex-direction:column;display:flex}.blog-list-page__main{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.blog-category-nav{position:relative}.blog-category-nav__list{gap:var(--space-2);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0;padding-block:var(--space-1);-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--space-4), #000 calc(100% - var(--space-6)), transparent 100%);mask-image:linear-gradient(to right, transparent 0, #000 var(--space-4), #000 calc(100% - var(--space-6)), transparent 100%);flex-direction:row;margin:0;list-style:none;display:flex;overflow-x:auto}.blog-category-nav__list::-webkit-scrollbar{display:none}.blog-category-nav__item{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-card);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);white-space:nowrap;scroll-snap-align:start;transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);text-decoration:none;display:inline-flex}@media (hover:hover){.blog-category-nav__item:hover{background:oklch(from var(--color-primary) l c h / .08);border-color:oklch(from var(--color-primary) l c h / .5);color:var(--text-primary)}}.blog-category-nav__item:focus-visible{outline:2px solid var(--color-focus,var(--color-primary));outline-offset:2px}.blog-category-nav__item.is-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-text)}.blog-category-nav__count{font-variant-numeric:tabular-nums;font-size:var(--text-xs);opacity:.7}.blog-category-nav__item.is-active .blog-category-nav__count{opacity:.85}.blog-search-wrap{align-items:center;width:100%;display:flex;position:relative}.blog-search__icon{left:var(--space-3);color:var(--text-muted);pointer-events:none;flex-shrink:0;position:absolute}.blog-search__input{width:100%;padding:var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 15px + var(--space-2));background:var(--bg-muted);border:1px solid var(--border-default);border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--input-font-size);color:var(--text-primary);transition:border-color var(--transition-fast), background var(--transition-fast);-webkit-appearance:none;line-height:1.4}.blog-search__input::placeholder{color:var(--text-muted)}.blog-search__input:focus-visible{border-color:var(--color-primary);background:var(--bg-card);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / .12);outline:none}.blog-search__input::-webkit-search-cancel-button{-webkit-appearance:none}.blog-list__cover{aspect-ratio:16/9;padding:0;overflow:hidden}.blog-list__cover img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-slow) ease;display:block}.blog-card--hero .blog-list__cover img{transform:scale(1.03)}@media (hover:hover){.card:hover .blog-list__cover img{transform:scale(1.03)}}.blog-card__date{font-size:var(--text-xs);color:var(--text-muted);margin-left:auto}@media (width>=768px){.blog-list-page__body{gap:var(--space-6);padding-block:var(--space-4) var(--space-6);grid-template-columns:14rem 1fr;display:grid}.blog-category-nav{top:var(--space-4);align-self:start;position:sticky}.blog-category-nav__list{flex-direction:column;gap:2px;padding-block:0;overflow:visible;-webkit-mask-image:none;mask-image:none}.blog-category-nav__item{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--text-secondary);white-space:normal;background:0 0;border:1px solid #0000;justify-content:space-between}@media (hover:hover){.blog-category-nav__item:hover{background:oklch(from var(--color-primary) l c h / .06);color:var(--text-primary);border-color:#0000}}.blog-category-nav__item.is-active{background:oklch(from var(--color-primary) l c h / .1);color:var(--color-primary);font-weight:var(--font-semibold);box-shadow:inset 3px 0 0 var(--color-primary);border-color:#0000}.blog-category-nav__count{opacity:.6}.blog-list-page__main{gap:var(--space-4)}.blog-search-wrap{max-width:24rem}.blog-list-grid .blog-card--hero{grid-column:1/-1}}@media (width>=1024px){.blog-list-page__body{max-width:min(72rem, calc(100% - 2 * var(--space-6)));grid-template-columns:16rem 1fr;margin-inline:auto}.blog-list-page .list-main{max-width:none;margin-inline:0}.blog-card--hero .blog-list__cover{aspect-ratio:21/9}}