.projects-page { background: #fff; }
.projects-page::before, .projects-page::after { display: none; }
.projects-skip { position: fixed; top: -6rem; left: 1rem; z-index: 50; padding: 1rem; background: #fff; color: #030507; }
.projects-skip:focus { top: 1rem; }
.projects-page .site-nav a[aria-current="page"] { color: var(--blue); }
.projects-hero {
  padding: 200px 24px 100px;
  text-align: center;
  background: linear-gradient(rgb(3 5 7 / 65%), rgb(3 5 7 / 70%)), url("assets/images/projects/portfolio-header.webp") center / cover;
}
.projects-hero h1 { max-width: none; margin: 0 0 18px; font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.projects-hero nav { color: var(--blue); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.projects-hero nav span { margin-left: 8px; }
.projects-gallery { padding: 64px 30px 72px; background: #eef0f1; color: #101820; }
.projects-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; }
.projects-filters[hidden] { display: none; }
.projects-filters button { min-height: 44px; padding: 8px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: inherit; cursor: pointer; }
.projects-filters button[aria-pressed="true"] { color: #005598; border-bottom-color: #005598; }
.projects-filters button:hover { color: #005598; }
.projects-page a:focus-visible, .projects-filters button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.projects-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 1800px; margin: 0 auto; }
.project-card { position: relative; display: flex; align-items: end; justify-content: center; aspect-ratio: 1.5; overflow: hidden; border-radius: 16px; isolation: isolate; background: #102331; color: #fff; }
.project-card[hidden] { display: none; }
.project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 350ms ease; }
.project-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 25%) 40%, rgb(0 0 0 / 80%)); z-index: -1; }
.project-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(57 168 255 / 16%); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.project-card:hover::after, .project-card:focus-visible::after { opacity: 1; }
.project-card h2 { margin: 0; padding: 24px 18px; text-align: center; font-family: inherit; font-size: clamp(1rem, 1.35vw, 1.45rem); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.project-card:hover img, .project-card:focus-visible img { transform: scale(1.04); }
@media (max-width: 1300px) { .projects-hero { padding: 120px 24px 50px; } }
@media (max-width: 1000px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-card h2 { font-size: 1.1rem; }
}
@media (max-width: 600px) {
  .projects-hero { padding: 135px 20px 48px; }
  .projects-gallery { padding: 32px 16px 40px; }
  .projects-grid { grid-template-columns: 1fr; }
  .projects-filters { gap: 4px 18px; margin-bottom: 20px; }
  .project-card h2 { font-size: 1.1rem; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .project-card img, .project-card::after { transition: none; } }