/*
 * Paper Juice directory — compact classical treatment.
 * Directory typography stays consistent and scannable even when a reader
 * chooses a decorative font for long-form articles.
 */
body.paperjuice-page {
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-body: 15px;
  --fs-h1: clamp(30px, 3vw, 40px);
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-card-title: clamp(16px, 1.35vw, 18px);
  --fs-small: 10px;
  --fs-label: 10px;
  --ls: 1.5;
}

body.paperjuice-page .page > section:first-child {
  margin-bottom: 22px !important;
}

body.paperjuice-page .page > section:first-child h1 {
  max-width: 26ch;
  margin: 6px 0 10px !important;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}

body.paperjuice-page .page > section:first-child .excerpt {
  max-width: 68ch !important;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
}

body.paperjuice-page .paperjuice-hero-stats {
  grid-template-columns: repeat(3, minmax(0, 132px));
  gap: 8px;
  max-width: 420px;
  margin-top: 18px;
}

body.paperjuice-page .paperjuice-hero-stat {
  padding: 9px 11px;
  border-radius: 6px;
}

body.paperjuice-page .paperjuice-hero-stat strong {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}

body.paperjuice-page .paperjuice-hero-stat span {
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1.2;
}

body.paperjuice-page .paperjuice-library.library-panel {
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--paper) 94%, white 6%);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}

body.paperjuice-page .library-group-heading {
  padding: 15px 17px;
}

body.paperjuice-page .library-group-heading .meta {
  font-size: 10px;
  line-height: 1.35;
}

body.paperjuice-page .library-group-heading .excerpt {
  max-width: 72ch;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
}

body.paperjuice-page .library-group-heading .meta:last-child {
  margin-top: 7px;
}

body.paperjuice-page .paperjuice-library .library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}

body.paperjuice-page .paperjuice-library .library-grid .post-card,
html.view-modern body.paperjuice-page .paperjuice-library .library-grid .post-card,
html.view-modern body.paperjuice-page .paperjuice-library .library-grid .post-card:first-child {
  min-height: 0;
  margin: 0;
  padding: 14px;
  border: 1.25px solid var(--ink) !important;
  border-radius: 6px !important;
  background: var(--paper) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.paperjuice-page .paperjuice-library .library-grid .post-card:hover,
html.view-modern body.paperjuice-page .paperjuice-library .library-grid .post-card:hover {
  background: color-mix(in srgb, var(--yellow-soft) 22%, var(--paper)) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  transform: translate(-1px, -1px) !important;
}

body.paperjuice-page .paperjuice-library .library-grid .post-card .cat {
  top: 10px;
  right: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 8px;
  line-height: 1.2;
}

body.paperjuice-page .paperjuice-library .library-grid .post-card h3 {
  padding-right: 62px;
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
}

body.paperjuice-page .paperjuice-library .library-grid .card-excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

body.paperjuice-page .paperjuice-library .library-grid .tag {
  padding: 2px 7px;
  font-family: var(--font-body);
  font-size: 8px;
  line-height: 1.2;
}

body.paperjuice-page .paperjuice-library .library-grid .card-meta {
  gap: 7px;
  padding-top: 2px;
  font-family: var(--font-body);
  font-size: 8px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  body.paperjuice-page {
    --fs-h1: clamp(27px, 8vw, 32px);
    --fs-card-title: 16px;
  }

  body.paperjuice-page .page > section:first-child .excerpt {
    font-size: 13px;
    line-height: 1.5;
  }

  body.paperjuice-page .paperjuice-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.paperjuice-page .paperjuice-hero-stat {
    padding: 8px;
  }

  body.paperjuice-page .paperjuice-hero-stat strong {
    font-size: 20px;
  }

  body.paperjuice-page .paperjuice-library.library-panel {
    border-radius: 7px !important;
  }

  body.paperjuice-page .library-group-heading {
    padding: 13px 14px;
  }

  body.paperjuice-page .paperjuice-library .library-grid {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 10px;
  }

  body.paperjuice-page .paperjuice-library .library-grid .post-card,
  html.view-modern body.paperjuice-page .paperjuice-library .library-grid .post-card,
  html.view-modern body.paperjuice-page .paperjuice-library .library-grid .post-card:first-child {
    padding: 13px;
  }

  body.paperjuice-page .paperjuice-library .library-grid .card-excerpt {
    font-size: 11.5px;
    -webkit-line-clamp: 4;
  }
}