/* PROJECTS */
.projects__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.projects__head .section-intro { margin: 0; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters__btn {
  font: 500 .95rem/1 var(--font-head); padding: .65rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--night); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.filters__btn:hover { border-color: var(--panel); }
.filters__btn[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: var(--white); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.25rem 1.75rem; }
.tile[hidden] { display: none; }
.tile__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--night); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__media .badge { position: absolute; left: .8rem; top: .8rem; }
.tile__body { padding-top: 1.1rem; }
.tile__title { font-size: 1.45rem; margin-bottom: .2rem; }
.tile__title a { color: inherit; text-decoration: none; }
.tile__title a:hover { color: var(--panel); }
.tile__meta { color: var(--sun-deep); font: 500 .98rem/1.4 var(--font-head); margin-bottom: .6rem; }
.tile__sum { color: var(--muted); margin-bottom: .8rem; }
.tile__link { font: 600 1rem/1 var(--font-head); text-decoration: none; border-bottom: 2px solid var(--sun); padding-bottom: .2rem; }
.tile__link:hover { color: var(--night); }