/* ===================================================================
   WORK PAGE — archive grid + case-study overlay
   =================================================================== */

.work-hero{ padding-top:calc(var(--sp-6) + 3rem); }
.work-hero .link-arrow{ display:inline-block; margin-bottom:var(--sp-4); }
.work-hero__title{ font-size:var(--fs-xl); margin-block:.3em var(--sp-3); max-width:20ch; }
.work-hero__desc{ max-width:56ch; font-size:var(--fs-md); }

.archive__filters{
  display:flex; gap:.6em; flex-wrap:wrap; margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--hairline); padding-bottom:var(--sp-4);
}
.archive__filters button{
  font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em;
  padding:.6em 1.1em; border-radius:var(--r-pill); border:1px solid var(--hairline);
  color:var(--ink-mute); transition:all var(--dur-1) var(--ease-out);
}
.archive__filters button:hover{ color:var(--ink); border-color:var(--hairline-strong); }
.archive__filters button.is-active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.archive__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-4);
}
.archive-card{
  position:relative; border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden;
  background:var(--bg-elevated); cursor:pointer; transition:border-color var(--dur-2), transform var(--dur-2);
}
.archive-card:hover{ border-color:var(--hairline-strong); transform:translateY(-4px); }
.archive-card__media{ aspect-ratio:16/10; overflow:hidden; }
.archive-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.archive-card:hover .archive-card__media img{ transform:scale(1.06); }
.archive-card__body{ padding:var(--sp-3); }
.archive-card__type{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.archive-card__body h3{ font-size:var(--fs-md); margin-block:.4em .3em; }
.archive-card__body p{ margin-bottom:.8em; }
.archive-card.is-hidden{ display:none; }

@media (max-width:760px){
  .archive__grid{ grid-template-columns:1fr; }
}

/* ---- Case study overlay ---- */
.project-overlay{
  position:fixed; inset:0; z-index:950; visibility:hidden;
}
.project-overlay.is-open{ visibility:visible; }
.project-overlay__backdrop{
  position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--ease-out);
}
.project-overlay.is-open .project-overlay__backdrop{ opacity:1; }

.project-overlay__panel{
  position:absolute; top:0; right:0; height:100%; width:min(680px, 100%);
  background:var(--bg-elevated); border-left:1px solid var(--hairline);
  overflow-y:auto; padding:var(--sp-6) var(--sp-4) var(--sp-5);
  transform:translateX(100%); transition:transform .5s var(--ease-in-out);
}
.project-overlay.is-open .project-overlay__panel{ transform:translateX(0); }

.project-overlay__close{
  position:absolute; top:var(--sp-3); right:var(--sp-3);
  font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-mute); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:.5em 1em;
}
.project-overlay__close:hover{ color:var(--ink); border-color:var(--hairline-strong); }

.overlay-media{ border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp-4); aspect-ratio:16/10; }
.overlay-type{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.overlay-title{ font-size:var(--fs-lg); margin-block:.4em var(--sp-3); }
.overlay-desc{ color:var(--ink-soft); margin-bottom:var(--sp-4); max-width:56ch; }
.overlay-label{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-mute); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.6em; }

@media (max-width:600px){
  .project-overlay__panel{ width:100%; padding:var(--sp-5) var(--gutter); }
}