/* ── PAGE HERO ── */
    .page-hero {
      padding-top: calc(clamp(56px, 7vw, 68px) + clamp(var(--space-12), 8vw, var(--space-20)));
      padding-bottom: clamp(var(--space-10), 6vw, var(--space-16));
      border-bottom: 1px solid var(--color-divider);
      background:
        radial-gradient(circle at 82% 18%, oklch(from var(--color-accent) l c h / 0.16), transparent 28rem),
        linear-gradient(135deg, var(--color-bg), var(--color-surface));
    }
    .page-hero__eyebrow { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); }
    .page-hero__title { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 400;
      color: var(--color-text); line-height: 1.1; margin-bottom: var(--space-4); }
    .page-hero__title em { font-style: italic; color: var(--color-primary); }
    .page-hero__subtitle { font-size: var(--text-base); color: var(--color-text-muted); max-width: 58ch; line-height: 1.65; }
    .page-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
    .hero-link { display: inline-flex; align-items: center; justify-content: center;
      min-height: 44px; padding: var(--space-2) var(--space-5);
      border-radius: var(--radius-full); border: 1px solid oklch(from var(--color-text) l c h / 0.16);
      color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
    .hero-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .hero-link--primary { background: var(--color-primary); border-color: var(--color-primary);
      color: var(--color-text-inverse); }
    .hero-link--primary:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }
    .page-hero__meta { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-6); flex-wrap: wrap; }
    .page-hero__stat { display: flex; flex-direction: column; gap: 2px; }
    .page-hero__stat-num { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary); line-height: 1; }
    .page-hero__stat-label { font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.05em; text-transform: uppercase; }

    /* ── CONTROLS BAR ── */
    .controls { padding-block: var(--space-6); background: var(--color-surface);
      border-bottom: 1px solid var(--color-divider); position: sticky;
      top: clamp(56px, 7vw, 68px); z-index: 90; }
    .controls__inner { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
    .search-wrap { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
    .search-wrap svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
      color: var(--color-text-faint); pointer-events: none; }
    .search-input { width: 100%; padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-3) + 20px + var(--space-2));
      background: var(--color-bg); color: var(--color-text);
      border: 1px solid oklch(from var(--color-text) l c h / 0.15);
      border-radius: var(--radius-full); font-size: var(--text-sm);
      transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive); }
    .search-input::placeholder { color: var(--color-text-faint); }
    .search-input:focus { outline: none; border-color: var(--color-primary);
      box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.12); }
    .filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
    .chip { font-size: var(--text-xs); font-weight: 500; padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full); cursor: pointer; border: 1px solid transparent;
      letter-spacing: 0.03em; transition: all var(--transition-interactive);
      background: oklch(from var(--color-text) l c h / 0.06);
      color: var(--color-text-muted); }
    .chip:hover { color: var(--color-text); background: oklch(from var(--color-text) l c h / 0.1); }
    .chip.active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
    .sort-select { font-size: var(--text-xs); padding: var(--space-2) var(--space-3);
      background: var(--color-bg); color: var(--color-text-muted);
      border: 1px solid oklch(from var(--color-text) l c h / 0.15);
      border-radius: var(--radius-md); cursor: pointer; margin-left: auto; }
    .sort-select:focus { outline: none; border-color: var(--color-primary); }

    /* ── MAIN CONTENT ── */
    .library-main { padding-block: clamp(var(--space-10), 5vw, var(--space-16)); }

    /* ── RESULTS HEADER ── */
    .results-header { display: flex; align-items: center; justify-content: space-between;
      margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-3); }
    .results-count { font-size: var(--text-sm); color: var(--color-text-muted); }
    .results-count strong { color: var(--color-text); }

    /* ── FEATURED BANNER ── */
    .featured-section { margin-bottom: var(--space-10); }
    .featured-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); }
    .featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-4); }

    /* ── CARD ── */
    .lib-card {
      display: flex; flex-direction: column;
      background: var(--color-surface);
      border: 1px solid oklch(from var(--color-text) l c h / 0.07);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      text-decoration: none; color: inherit;
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }
    .lib-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: oklch(from var(--color-primary) l c h / 0.3);
    }
    .lib-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    .lib-card--featured { border-color: oklch(from var(--color-primary) l c h / 0.22);
      background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface)); }
    .lib-card--featured::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    }

    .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
    .card-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

    /* Category pill — colour per category */
    .cat-pill {
      font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em;
      padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
      text-transform: uppercase;
    }
    .cat-pill--training  { background: var(--cat-training-bg);  color: var(--cat-training); }
    .cat-pill--course    { background: var(--cat-course-bg);    color: var(--cat-course); }
    .cat-pill--session   { background: var(--cat-session-bg);   color: var(--cat-session); }
    .cat-pill--project   { background: var(--cat-project-bg);   color: var(--cat-project); }
    .cat-pill--workshop  { background: var(--cat-workshop-bg);  color: var(--cat-workshop); }

    .featured-badge { font-size: 0.65rem; font-weight: 600; padding: 2px var(--space-2);
      background: oklch(from var(--color-accent) l c h / 0.15); color: var(--color-accent);
      border-radius: var(--radius-full); letter-spacing: 0.05em; text-transform: uppercase; }

    .card-arrow { color: var(--color-text-faint); flex-shrink: 0; margin-left: auto;
      transition: transform var(--transition-interactive), color var(--transition-interactive); }
    .lib-card:hover .card-arrow { transform: translateX(3px) translateY(-3px); color: var(--color-primary); }

    .card-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400;
      color: var(--color-text); line-height: 1.25; margin-bottom: var(--space-2); }
    .card-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6;
      flex: 1; margin-bottom: var(--space-5); }

    .card-footer { display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-3); flex-wrap: wrap; margin-top: auto; }
    .card-meta { display: flex; align-items: center; gap: var(--space-4); }
    .card-date { font-size: var(--text-xs); color: var(--color-text-faint); }
    .card-duration { font-size: var(--text-xs); color: var(--color-text-faint);
      display: flex; align-items: center; gap: var(--space-1); }
    .card-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
    .card-tag { font-size: 0.7rem; padding: 2px var(--space-2);
      background: oklch(from var(--color-text) l c h / 0.06);
      color: var(--color-text-faint); border-radius: var(--radius-sm); }

    /* ── ALL ENTRIES LIST ── */
    .all-section { }
    .all-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-4); }
    .all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); }

    /* ── EMPTY STATE ── */
    .empty-state { text-align: center; padding: var(--space-20) var(--space-4);
      display: none; flex-direction: column; align-items: center; gap: var(--space-4); }
    .empty-state.visible { display: flex; }
    .empty-state__icon { color: var(--color-text-faint); margin-bottom: var(--space-2); }
    .empty-state__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); }
    .empty-state__body { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 36ch; }
    .empty-clear { font-size: var(--text-sm); color: var(--color-primary); cursor: pointer;
      background: none; border: none; text-decoration: underline; }

/* ── RESPONSIVE — LIBRARY PAGE — ── */
    @media (max-width: 767px) {
      .controls__inner { gap: var(--space-3); }
      .search-wrap { max-width: 100%; }
      .sort-select { margin-left: 0; }
      .page-hero__title { font-size: clamp(3rem, 16vw, 4.5rem); }
      .page-hero__actions { flex-direction: column; align-items: stretch; }
    }
    @media (max-width: 599px) {
      .all-grid { grid-template-columns: 1fr; }
      .featured-grid { grid-template-columns: 1fr; }
    }