/* pages/work.css — Work index */

/* centred, oversized hero (Jitter-style) */
.work-index .page-hero{
  max-width:none;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding-top:clamp(8px,4vw,48px);
}
.work-index .page-hero .jt-kicker{
  display:inline-block;margin:0 0 28px;
  background:var(--soft-grey);color:var(--near-black);
  font-size:14px;font-weight:500;letter-spacing:.01em;
  padding:7px 16px;border-radius:999px;
}
.work-index .page-hero h1{
  max-width:15ch;
  font-size:clamp(38px,7.2vw,102px);font-weight:700;letter-spacing:-.04em;line-height:1.08;
}
.work-index .page-hero .page-lede{
  margin:28px auto 0;text-align:center;max-width:46ch;
  color:var(--near-black);font-size:clamp(16px,1.6vw,20px);line-height:1.5;
}
.work-index .page-hero .work-index-note{
  margin-top:16px;max-width:56ch;color:var(--mid-grey);font-size:15px;
}

.work-list{margin-top:clamp(64px,10vw,112px);display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* cards — identical treatment to the homepage Selected work cards */
.work-card{display:block;text-decoration:none;color:inherit}
.work-card:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.work-card-inner{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:#f2f2f0;border-radius:36px;padding:32px 28px 26px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.work-card:hover .work-card-inner{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,17,17,.08)}
.work-card-preview{width:100%;aspect-ratio:1;display:grid;place-items:center}
.work-card-preview img{
  display:block;width:72%;height:72%;object-fit:cover;border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.38);
}
.work-card-preview span{
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  opacity:.72;padding:0 16px;text-align:center;color:var(--near-black);
}
.work-card-foot{margin-top:22px;display:flex;flex-direction:column;gap:3px}
.work-card-foot h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;line-height:1.25;font-weight:600}
.work-card-label{font-size:13px;color:#8a8a86}
.work-card-view{
  position:absolute;top:20px;right:20px;z-index:2;
  width:43px;height:43px;border-radius:999px;display:grid;place-items:center;
  background:var(--near-black);color:#fff;box-shadow:0 2px 8px rgba(17,17,17,.1);
  transition:transform var(--t-state),background var(--t-state);
}
.work-card:hover .work-card-view{background:var(--cobalt)}

@media (max-width:768px){
  .work-list{grid-template-columns:1fr;margin-top:56px}
  .work-card-inner{border-radius:24px;padding:24px 20px 20px}
}