.pb-8{padding-bottom:2rem}
.pb-12{padding-bottom:3rem}
.pt-16{padding-top:4rem}

.article-title,
main article > header h1{
  font-size:2.7rem;
  line-height:1.03;
  text-wrap:balance;
}

.knowledge-title{
  max-width:none;
  text-wrap:balance;
}

.knowledge-card{
  display:block;
  cursor:pointer;
  border-radius:.375rem;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.knowledge-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px -30px rgba(47,54,38,.35);
}

.knowledge-card:focus-visible{
  outline:2px solid var(--color-olive,#59613f);
  outline-offset:4px;
}

@media (min-width:40rem){
  .article-title,
  main article > header h1{font-size:3.8rem}
}

@media (min-width:64rem){
  .article-title,
  main article > header h1{font-size:4.7rem}
  .knowledge-title{white-space:nowrap}
  .lg\:pb-10{padding-bottom:2.5rem}
  .lg\:pb-16{padding-bottom:4rem}
  .lg\:pt-10{padding-top:2.5rem}
  .lg\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
}
.article-author-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(79, 91, 70, 0.2);
}

.article-author-name {
  color: #59654f;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.article-author-role {
  max-width: 42rem;
  margin-top: 0.55rem;
  color: rgba(45, 42, 38, 0.7);
  font-size: 0.95rem;
  line-height: 1.65;
}

.article-author-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem 1.25rem;
  color: rgba(45, 42, 38, 0.58);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-author-link {
  color: #59654f;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.article-author-name:focus-visible,
.article-author-link:focus-visible {
  outline: 2px solid #59654f;
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 767px) {
  .article-author-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .article-author-details {
    justify-content: flex-start;
  }
}