.sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.btn-ghost{background: transparent; color: var(--ink-3); padding: .625rem 1rem;}
.btn-ghost:hover{color: var(--ink); background: var(--bg-2); border-radius: var(--r-md);}
.btn-xl{padding: 1.125rem 2.5rem; font-size: 1.0625rem;}
.comp-nav-links{display: flex; align-items: center; gap: 1.75rem;}
.comp-nav-links a{font-size: .875rem; font-weight: 500; color: var(--ink-3);
  transition: color .15s; position: relative;}
.comp-nav-links a:hover{color: var(--ink);}
.comp-nav-links a.active{color: var(--orange-text); font-weight: 700;}
.comp-footer{background: var(--c-dark); padding: 4rem 0 2rem;
  border-top: 1px solid rgba(255,255,255,.05);}
.comp-footer p{color: rgba(255,255,255,.68);}
.comp-footer a{color: #FFFFFF; text-decoration: underline;}
@media(max-width:768px){
.comp-nav-links{display: none;}
}
.tf-cats{display: flex; flex-wrap: wrap; gap: .5rem;}
.tf-cat-btn{display: inline-flex; align-items: center; padding: .5rem 1.125rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600; color: var(--ink-3);
  background: var(--white); transition: var(--t); text-decoration: none;}
.tf-cat-btn:hover{border-color: var(--orange-light); color: var(--orange-text);}
.tf-cat-btn.active{background: var(--c-dark); border-color: var(--c-dark); color: #fff;}