.blog-hero{background:linear-gradient(180deg,#fffffffa,#f4f8fcfa);color:var(--text-primary);border-bottom:1px solid var(--border-light)}.blog-hero__inner{max-width:var(--site-shell-outer-max-width);margin-inline:auto;padding:var(--page-hero-padding-top) var(--content-padding) var(--page-hero-padding-bottom);display:flex;flex-direction:column;gap:var(--space-3);align-items:center;text-align:center}.blog-hero__eyebrow{margin:0;font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-accent)}.blog-hero__title{font-family:var(--font-heading);font-size:var(--page-hero-title-size);font-weight:var(--font-semibold);color:var(--text-primary);letter-spacing:var(--tracking-normal);line-height:1.02;max-width:min(100%,var(--hero-copy-max-width));margin-inline:auto}.blog-hero__desc{max-width:min(100%,var(--hero-text-max-width));margin-inline:auto;font-size:var(--text-base);color:var(--text-secondary)}.blog-task-grid,.blog-support-grid,.blog-grid{display:grid;gap:var(--space-4)}.blog-task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-support-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.blog-start-card,.blog-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-2xl);text-decoration:none;transition:all var(--transition-base)}.blog-start-card{text-align:left;color:var(--text-primary);background:var(--bg-white);border:1px solid var(--border);box-shadow:var(--shadow-xs)}.blog-start-card__title,.blog-card__title{font-family:var(--font-heading);font-size:var(--section-title-size-compact);font-weight:var(--font-semibold);color:inherit}.blog-start-card__desc,.blog-card__excerpt{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.blog-start-card__desc{color:var(--text-secondary)}.blog-start-card:hover{border-color:var(--color-primary-light);background:var(--bg-light)}.blog-filters{border-bottom:1px solid var(--border);background:var(--bg-white);position:sticky;top:var(--header-height);z-index:var(--z-sticky)}.blog-filters__inner{max-width:var(--site-shell-outer-max-width);margin-inline:auto;padding:var(--space-4) var(--content-padding);display:flex;gap:var(--space-2);overflow-x:auto}.blog-filter{padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);background:none;border:1px solid var(--border);white-space:nowrap;transition:all var(--transition-fast)}.blog-filter--active{background:var(--color-primary);color:var(--text-white);border-color:var(--color-primary)}.blog-card{border:1px solid var(--border);background:var(--bg-white)}.blog-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.blog-card__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.blog-card__category{font-size:var(--text-2xs);font-weight:var(--font-semibold);color:var(--color-primary);background:var(--color-accent-light);padding:var(--space-1) var(--space-2-5);border-radius:var(--radius-sm)}.blog-card__date,.blog-card__read{font-size:var(--text-xs);color:var(--text-muted)}.blog-card__title{color:var(--text-primary)}.blog-card__excerpt{color:var(--text-secondary)}.blog-card__tasks{display:flex;flex-wrap:wrap;gap:var(--space-2)}.blog-card__task{font-size:var(--text-2xs);font-weight:var(--font-semibold);color:var(--text-primary);background:var(--color-accent-light);border-radius:var(--radius-full);padding:6px 10px}.blog-card__read{font-weight:var(--font-semibold);color:var(--color-accent)}.blog-exit-shell{width:min(100%,var(--site-shell-max-width));margin-inline:auto;display:grid;gap:var(--space-4)}.blog-exit-title{margin:0;font-family:var(--font-heading);font-size:var(--section-title-size-compact);letter-spacing:var(--tracking-normal);color:var(--text-primary)}@media(max-width:960px){.blog-task-grid,.blog-support-grid,.blog-grid{grid-template-columns:1fr}}@media(max-width:768px){.blog-hero__title{font-size:var(--page-hero-title-size-mobile)}}