/* extracted from articles.html */
.al-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; margin-bottom: 48px; }
  .al-filter { padding: 10px 20px; border: 1px solid var(--paper-15); border-radius: 99px; font-size: 13px; color: var(--paper-70); background: transparent; cursor: pointer; transition: all .2s; font-family: var(--f-body); }
  .al-filter:hover { border-color: var(--accent-text); color: var(--accent-text); }
  .al-filter.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .al-featured { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-top: 48px; margin-bottom: 16px; }
  .al-featured-card { background: var(--ink-2); padding: 48px 48px 56px; border: 1px solid var(--paper-08); text-decoration: none; color: inherit; position: relative; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
  .al-featured-card .cover { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; }
  .al-featured-card .grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,27,18,.5) 0%, rgba(12,27,18,.9) 100%); }
  .al-featured-card .content { position: relative; z-index: 2; }
  .al-featured-card .cat { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
  .al-featured-card h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -.02em; line-height: 1.1; margin: 16px 0 16px; }
  .al-featured-card .more { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
  .al-side { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--paper-08); }
  .al-side .article-card { min-height: 0; padding: 28px; }
  @media (max-width: 1100px) { .al-featured { grid-template-columns: 1fr; } }