@layer templates{.article-archive{--edge:var(--shell-mobile-edge,16px);--text-page-title:2rem;--article-chip-disabled:#faf7f2;--article-chip-disabled-line:#c3b6a2}main:has(.article-archive){background:var(--color-page)}.article-archive{gap:var(--space-9);width:var(--shell-width);padding-block:var(--shell-main-top) var(--shell-main-bottom);line-height:var(--leading-loose);flex-direction:column;margin-inline:auto;display:flex;@media (width<1000px){gap:var(--space-15)}}.article-archive__header{gap:var(--space-3);flex-direction:column;display:flex}.article-archive__title{font-size:var(--text-page-title);font-weight:900;line-height:var(--leading-tight);@media (width<1000px){font-size:var(--text-title)}}.article-archive__lead{color:var(--color-text-soft);font-size:var(--text-body-small);line-height:1.8}.article-filters{gap:var(--space-4);flex-direction:column;display:flex}.article-filters__title{color:var(--color-text-soft);font-size:var(--text-caption);font-weight:700}.article-filters__chips{gap:var(--space-3);flex-wrap:wrap;display:flex;@media (width<1000px){margin-inline:calc(-1 * var(--edge));padding:2px var(--space-13) 2px var(--edge);overscroll-behavior-x:contain;scroll-padding-left:var(--edge);scroll-snap-type:x proximity;scrollbar-width:none;mask-image:linear-gradient(90deg, var(--color-action-pressed) calc(100% - 40px), transparent);flex-wrap:nowrap;overflow-x:auto;&::-webkit-scrollbar{display:none}}}.article-chip{align-items:center;gap:var(--space-3);min-height:44px;padding:0 var(--space-7);border-radius:var(--radius-chip);box-shadow:var(--ring-action-inset);font-size:var(--text-small);font-weight:700;display:inline-flex;@media (width<1000px){padding:0 var(--space-6);font-size:var(--text-note);white-space:nowrap;scroll-snap-align:start;flex:none}&[aria-current=page]{background:var(--color-text);box-shadow:none;color:var(--color-text-on-dark)}}.article-chip--disabled{border:1.5px dashed var(--article-chip-disabled-line);background:var(--article-chip-disabled);box-shadow:none;color:var(--color-text-faint);cursor:default}.article-chip__count{font-family:var(--font-mono);font-size:var(--text-caption);opacity:.8}.article-trouble{align-self:flex-start;align-items:center;gap:var(--space-4);border-radius:var(--radius-md);background:var(--color-page);min-height:48px;box-shadow:var(--ring-action);font-size:var(--text-small);padding:0 18px;font-weight:700;display:flex;&[aria-current=page]{background:var(--color-accent-soft)}}.article-status{justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-line);flex-wrap:wrap;display:flex}.article-status__title{font-size:var(--text-body);font-weight:700}.article-status__count{color:var(--color-text-soft);font-size:var(--text-note)}.article-grid{--article-grid-gap:36px;gap:var(--article-grid-gap) var(--space-11);grid-template-columns:repeat(3,minmax(0,1fr));display:grid;@media (1000px<=width<1280px){column-gap:var(--space-12);grid-template-columns:repeat(2,minmax(0,1fr))}@media (width<1000px){gap:var(--space-6);grid-template-columns:minmax(0,1fr)}}.article-card__inner{gap:var(--space-4);flex-direction:column;display:flex;@media (width<1000px){gap:var(--space-5);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-line-soft);grid-template-columns:96px minmax(0,1fr);align-items:start;display:grid}&:hover{color:var(--color-accent)}&>.article-thumb{@media (width<1000px){display:none}}}.article-card__art{border-radius:var(--radius-md);object-fit:cover;width:96px;height:96px;display:none;@media (width<1000px){display:block}}.article-grid--beside{column-gap:var(--space-12);grid-template-columns:repeat(2,minmax(0,1fr));@media (width<1000px){grid-template-columns:minmax(0,1fr)}& .article-card__inner{gap:var(--space-5);grid-template-columns:96px minmax(0,1fr);align-items:start;display:grid}& .article-card__art{display:block}}.article-card__copy{gap:var(--space-4);flex-direction:column;min-width:0;display:flex;@media (width<1000px){gap:var(--space-1)}}.article-card__meta{gap:var(--space-3);color:var(--color-text-soft);font-size:var(--text-caption);font-weight:700;display:flex;@media (width>=1000px){display:none}}.article-card__category{color:var(--color-accent)}.article-card__label{font-size:var(--text-body-small);line-height:1.45;display:none;@media (width<1000px){display:block}}.article-card__title{font-size:var(--text-body);font-weight:700;line-height:var(--leading-snug);@media (width<1000px){font-size:var(--text-note);font-weight:500}}.article-card__summary{color:var(--color-text-soft);font-size:var(--text-note);line-height:var(--leading-normal);-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;@media (width<1000px){font-size:var(--text-caption);-webkit-line-clamp:2;line-height:1.7}}.article-thumb--archive{border-radius:var(--radius-card);height:220px;box-shadow:var(--ring-action);grid-template-columns:minmax(0,1fr) 192px;& .article-thumb__copy{padding:var(--space-7) var(--space-6) var(--space-7) 18px}& .article-thumb__role{align-self:flex-start;gap:var(--space-2);min-height:24px;padding-inline:var(--space-4);border-radius:var(--radius-chip);background:var(--color-panel);color:var(--color-text);font-size:var(--text-caption);&>.article-thumb__role-mark{display:none}}& .article-thumb__hook{font-size:var(--text-title-tiny);@media (1000px<=width<1280px){font-size:var(--text-title-medium)}}& .article-thumb__theme{gap:var(--space-3);font-size:var(--text-tiny)}}.article-thumb--know .article-thumb__role{background:var(--color-action);color:var(--color-text-on-dark)}.article-thumb--compare .article-thumb__role{background:var(--color-page);box-shadow:inset 0 0 0 1px var(--color-text)}.article-thumb--trouble .article-thumb__role{background:var(--color-accent-soft);color:var(--color-accent-text)}.article-pager{justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.article-pager__step{min-width:44px;min-height:44px;padding:0 var(--space-5);border-radius:var(--radius-tile);box-shadow:inset 0 0 0 1px var(--color-line-strong);font-size:var(--text-small);justify-content:center;align-items:center;font-weight:700;display:flex;&[aria-current=page]{background:var(--color-text);color:var(--color-text-on-dark)}}.article-related{gap:var(--space-5);padding-top:var(--space-8);border-top:1px solid var(--color-line);grid-template-columns:repeat(3,minmax(0,1fr));display:grid;@media (width<1000px){grid-template-columns:minmax(0,1fr)}}.article-related__item{justify-content:space-between;align-items:center;gap:var(--space-3);min-height:52px;padding:0 var(--space-7);border-radius:var(--radius-md);box-shadow:var(--ring-action);font-size:var(--text-small);font-weight:700;display:flex}}