/* ── Category Layout ── */
    .cat-layout {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 52px;
      align-items: start;
    }
    .cat-main { min-width: 0; }

    /* ── Category header ── */
    .cat-header {
      background: var(--c-dark);
      padding: 40px 0 36px;
    }
    .cat-header-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 32px;
    }
    .cat-eyebrow {
      font-family: var(--f-ui);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--c-amber);
      margin-bottom: 10px;
    }
    .cat-title {
      font-family: var(--f-display);
      font-size: 52px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -1px;
      line-height: 1;
      margin-bottom: 12px;
    }
    .cat-desc {
      font-family: var(--f-body);
      font-size: 16px;
      color: rgba(255,255,255,0.55);
      max-width: 560px;
      line-height: 1.6;
      margin-bottom: 20px;
    }
    .cat-meta-row {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .cat-count {
      font-family: var(--f-ui);
      font-size: 12px;
      color: rgba(255,255,255,0.35);
    }
    .cat-subcats {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .subcat-pill {
      font-family: var(--f-ui);
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.6);
      background: rgba(255,255,255,0.08);
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.1);
      transition: background .15s, color .15s;
    }
    .subcat-pill:hover,
    .subcat-pill.active { background: var(--c-amber); color: var(--c-dark); border-color: transparent; }

    /* ── Featured story (pinned) ── */
    .cat-featured {
      padding: 36px 0 0;
    }
    .featured-story {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 32px;
      align-items: center;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 36px;
    }
    .featured-story-img {
      width: 100%;
      aspect-ratio: 4/3;
    }
    .featured-story-body {
      padding: 28px 28px 28px 0;
    }
    .featured-tag {
      font-family: var(--f-ui);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--c-accent);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .featured-tag::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: var(--c-accent);
    }
    .featured-headline {
      font-family: var(--f-display);
      font-size: 26px;
      font-weight: 800;
      line-height: 1.18;
      color: var(--c-dark);
      margin-bottom: 10px;
      text-wrap: balance;
    }
    .featured-headline a:hover { color: var(--c-accent); }
    .featured-dek {
      font-family: var(--f-body);
      font-size: 15px;
      color: var(--c-muted);
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .featured-byline {
      font-family: var(--f-ui);
      font-size: 12px;
      color: var(--c-muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* ── Article grid ── */
    .article-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
    }

    /* ── Pagination ── */
    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 36px 0 0;
    }
    .pg-btn {
      font-family: var(--f-ui);
      font-size: 13px;
      font-weight: 600;
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--c-border);
      color: var(--c-muted);
      background: var(--c-surface);
      cursor: pointer;
      transition: border-color .15s, color .15s, background .15s;
    }
    .pg-btn:hover { border-color: var(--c-dark); color: var(--c-dark); }
    .pg-btn.active { background: var(--c-dark); color: #fff; border-color: var(--c-dark); }
    .pg-ellipsis { font-family: var(--f-ui); font-size: 13px; color: var(--c-muted); padding: 0 4px; }

    /* ── Sidebar ── */
    .cat-sidebar {
      position: sticky;
      top: 80px;
      display: flex;
      flex-direction: column;
      gap: 28px;
      padding-top: 36px;
    }
    .sb-nl {
      background: var(--c-dark);
      border-radius: var(--radius);
      padding: 18px 18px 16px;
    }
    .sb-nl h4 {
      font-family: var(--f-display);
      font-size: 15px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
    }
    .sb-nl-badge {
      display: inline-block;
      font-family: var(--f-ui);
      font-size: 10px;
      font-weight: 700;
      background: var(--c-amber);
      color: var(--c-dark);
      padding: 2px 7px;
      border-radius: 3px;
      margin-bottom: 8px;
    }
    .sb-nl p { font-family: var(--f-ui); font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 12px; line-height: 1.5; }
    .sb-nl-form { display: flex; flex-direction: column; gap: 6px; }
    .sb-nl-form input {
      padding: 9px 12px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 4px;
      color: #fff;
      font-family: var(--f-ui);
      font-size: 13px;
      outline: none;
    }
    .sb-nl-form input::placeholder { color: rgba(255,255,255,0.35); }
    .sb-nl-form button {
      background: var(--c-accent);
      color: #fff;
      font-family: var(--f-ui);
      font-weight: 700;
      font-size: 12px;
      padding: 9px;
      border-radius: 4px;
      transition: background .15s;
    }
    .sb-nl-form button:hover { background: var(--c-accent-dk); }
    .sb-head {
      font-family: var(--f-ui);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--c-muted);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--c-border);
    }
    .sb-top-list { display: flex; flex-direction: column; gap: 0; }
    .sb-top-item {
      padding: 11px 0;
      border-bottom: 1px solid var(--c-border);
    }
    .sb-top-item:last-child { border-bottom: none; }
    .sb-top-item a {
      font-family: var(--f-display);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--c-dark);
    }
    .sb-top-item a:hover { color: var(--c-accent); }
    .sb-top-meta { font-family: var(--f-ui); font-size: 11px; color: var(--c-muted); margin-top: 3px; }
    .sb-subcats-list { display: flex; flex-direction: column; gap: 4px; }
    .sb-subcats-list a {
      font-family: var(--f-ui);
      font-size: 13px;
      color: var(--c-text);
      padding: 7px 10px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background .15s;
    }
    .sb-subcats-list a:hover { background: rgba(26,35,50,0.06); }
    .sb-subcats-list a span { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); }

    @media (max-width: 1000px) {
      .cat-layout { grid-template-columns: 1fr; }
      .cat-sidebar { display: none; }
      .article-grid { grid-template-columns: repeat(2, 1fr); }
      .featured-story { grid-template-columns: 1fr; }
      .featured-story-body { padding: 20px; }
    }
    @media (max-width: 640px) {
      .article-grid { grid-template-columns: 1fr; }
      .cat-title { font-size: 38px; }
      .cat-layout { padding: 0 20px; }
    }