/* Work page: every project as a large card, same measured spec as the home page */
.wk-hero { position: relative; isolation: isolate; text-align: center; display: grid; justify-items: center; gap: 20px; padding: clamp(140px, 18vh, 200px) var(--pad) 72px; overflow: hidden; }
.wk-hero .hero__beams { height: 520px; z-index: -1; }
.wk-hero .hero__beams::after { opacity: 0.55; bottom: -180px; }
.wk-hero__title { font: 500 clamp(64px, 9vw, 130px)/1 var(--sans); letter-spacing: -0.05em; }
.wk-hero__title em { font-size: 1.08em; }
.wk-hero__sub { color: var(--soft); font-size: 18px; max-width: 46ch; }
.wk-filter { display: flex; gap: 6px; padding: 4px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.wk-filter button { height: 32px; padding: 0 14px; border-radius: 99px; font-size: 14px; color: var(--soft); transition: background-color 0.3s, color 0.3s; }
.wk-filter button.is-on { background: var(--btn-bg); color: var(--btn-fg); }
.wk-filter button:not(.is-on):hover { color: var(--fg); }

.wk-grid { width: min(var(--max), 100% - 124px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-bottom: 120px; }
.wk-card { border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; transition: opacity 0.45s, transform 0.6s var(--ease); }
.wk-card.is-hidden { display: none; }
.wk-card a { display: grid; gap: 12px; padding: 14px 14px 24px; height: 100%; }
.wk-card__img { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 12 / 7; background: var(--bg-2); }
.wk-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease), opacity 0.6s var(--ease); }
.wk-card__alt { opacity: 0; transform: scale(1.06); }
@media (hover: hover) {
  .wk-card a:hover .wk-card__img img:first-child { transform: scale(1.04); opacity: 0; }
  .wk-card a:hover .wk-card__alt { opacity: 1; transform: scale(1); }
  .wk-card a:hover .wk-card__go i { transform: translate(3px, -3px); }
}
.wk-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 0; }
.wk-card__meta h2 { font: 500 clamp(22px, 2vw, 28px)/1.15 var(--sans); letter-spacing: -0.03em; }
.wk-card p { padding: 0 10px; color: var(--soft); font-size: 15px; max-width: 56ch; }
.wk-card__go { padding: 6px 10px 0; font-size: 14px; color: var(--fg); }
.wk-card__go i { display: inline-block; font-style: normal; transition: transform 0.35s var(--ease); }
.wk-card .tag { margin: 0; flex: none; background: rgba(255, 255, 255, 0.1); color: var(--soft); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; }
.wk-card .tag--live { background: var(--blue); color: #fff; }
:root[data-theme="light"] .wk-card .tag { background: rgba(0, 0, 0, 0.06); }

.wk-cta { display: grid; justify-items: center; gap: 22px; text-align: center; padding: 40px var(--pad) 120px; }
.wk-cta p { color: var(--soft); font-size: 18px; max-width: 44ch; }
.foot--slim { padding-top: 0; }
.foot--slim .foot__social { margin-top: 0; }
.foot--slim .foot__social a { justify-content: space-between; }

@media (max-width: 900px) {
  .wk-grid { grid-template-columns: 1fr; width: calc(100% - 32px); }
}

.js .wk-card { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .wk-card { opacity: 1; } }

:root[data-theme="light"] .wk-card .tag--live { background: var(--blue); color: #fff; }