.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.works-page { padding-top: 82px; }
.works-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr); align-items: end; gap: 40px; padding: clamp(64px, 7vw, 110px) var(--pad) 48px; }
.works-hero h1 { margin: 0; font: 900 clamp(72px, 8vw, 126px)/0.85 var(--display); letter-spacing: -0.065em; }
.works-hero h1 .accent { color: var(--blue); }
.works-catalog { padding: 0 var(--pad) clamp(80px, 8vw, 130px); }
.works-filter { position: sticky; z-index: 20; top: 68px; display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 22px 0; background: rgba(244, 246, 248, 0.96); backdrop-filter: blur(12px); }
.works-filter button { padding: 0 0 5px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font: 750 14px var(--body); cursor: pointer; }
.works-filter button:hover,
.works-filter button:focus-visible,
.works-filter button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--blue); }
.works-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 32px; }
.work-entry { min-width: 0; scroll-margin-top: 155px; }
.work-entry[hidden] { display: none; }
.work-link { display: flex; flex-direction: column; height: 100%; padding: 12px; background: var(--white); border: 1px solid #e0e4e9; transition: border-color 180ms ease, box-shadow 180ms ease; }
.work-link:hover { border-color: var(--blue); box-shadow: 0 12px 32px rgba(11, 13, 16, 0.06); }
.work-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.work-media { display: grid; place-items: center; overflow: hidden; }
.work-caption { display: flex; flex-direction: column; flex: 1; padding: 22px 12px 12px; }
.work-type { margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.work-caption h3 { margin: 0; font: 850 clamp(28px, 2.5vw, 40px)/1 var(--display); letter-spacing: -0.045em; }
.work-caption p { max-width: 480px; margin: 14px 0 24px; color: var(--muted); font-size: 14px; }
.work-open { display: block; margin-top: auto; font-size: 13px; font-weight: 750; }
.work-link:hover .work-open,
.work-link:focus-visible .work-open { color: var(--blue); }
.works-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; padding: clamp(56px, 6vw, 96px) var(--pad); color: var(--white); background: var(--blue); }
.works-contact h2 { margin: 0; font: 900 clamp(48px, 6vw, 90px)/0.9 var(--display); letter-spacing: -0.055em; }
.works-contact a { padding: 18px 24px; color: var(--ink); background: var(--white); font-size: 14px; font-weight: 800; }
@media (max-width: 840px) {
  .works-page { padding-top: 68px; }
  .works-hero { grid-template-columns: 1fr; gap: 28px; padding: 64px 22px 32px; }
  .works-hero h1 { font-size: clamp(62px, 12vw, 100px); }
  .works-catalog { padding-inline: 22px; }
  .works-filter { gap: 12px 22px; }
  .works-list { gap: 20px; }
  .work-link { padding: 8px; }
  .work-caption { padding-inline: 8px; }
  .works-contact { padding-inline: 22px; }
}
@media (max-width: 600px) {
  .works-list { grid-template-columns: 1fr; }
  .works-hero { padding-top: 40px; text-align: center; }
  .works-hero h1 { font-size: clamp(52px, 14vw, 75px); }
  .work-caption h3 { font-size: 32px; }
  .works-filter { gap: 8px 24px; justify-content: center; padding-block: 10px; }
  .works-filter button { font-size: 15px; min-height: 44px; }
  .works-list { padding-top: 20px; gap: 28px; }
  .work-caption p { font-size: 16px; line-height: 1.5; }
  .work-open { padding-block: 10px; font-size: 14px; }
  .works-contact h2 { font-size: clamp(40px, 11vw, 60px); }
  .works-contact a { width: 100%; text-align: center; }
}