/* ============================================================
   Work archive — the same paper, header and type as the rest of
   the site, so it reads as another view of the homepage rather
   than a separate page. Two sections; UX Works filters by
   category. Everything is scoped under .works / .wk / .wkm.
   ============================================================ */
.works {
  position: fixed; inset: 0; z-index: 95;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--hm-bg);
  color: var(--hm-ink);
  font-family: var(--hm-font);
  --wk-gut: clamp(20px, 4vw, 56px);
}

/* the site header, reused. It scrolls away like the homepage's does. */
.wk__top { background: linear-gradient(to bottom, var(--hm-bg) 68%, rgba(251, 251, 251, 0)); }
.wk__home { border: 0; padding: 6px 4px 6px 10px; background: none; cursor: pointer; font: inherit; }
.wk__close {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%; border: 1.4px solid var(--hm-line);
  background: #fff; color: var(--hm-ink); cursor: pointer; padding: 0;
  transition: background .25s var(--hm-ease), color .25s var(--hm-ease), transform .35s var(--hm-spring);
}
.wk__close svg { width: 18px; height: 18px; }
.wk__close:hover { background: var(--hm-ink); color: #fff; transform: rotate(90deg); }

.wk__inner { max-width: 1240px; margin-inline: auto; padding: clamp(12px, 2vh, 26px) var(--wk-gut) clamp(80px, 14vh, 150px); }

/* ---------- sections ---------- */
.wk__sec + .wk__sec { margin-top: clamp(56px, 9vh, 104px); }
/* A section with a filter row gets its breathing space from that row. One
   without filters — Industrial Design Works — puts its cards straight under
   the heading, so it has to find that space itself. */
.wk__secname + .wk__grid { margin-top: clamp(34px, 5.4vh, 62px); }
.wk__secname {
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  font-size: clamp(22px, 2.4vw, 31px); font-weight: 500;
  letter-spacing: -.04em; line-height: 1.02; color: var(--hm-ink);
}

/* ---------- category filter ---------- */
.wk__filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.wk__chip {
  border: 1.4px solid var(--hm-line-soft); background: #fff; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.02em;
  color: var(--hm-gray-3); padding: 10px 18px; border-radius: 100px;
  transition: color .22s var(--hm-ease), background .22s var(--hm-ease),
              border-color .22s var(--hm-ease), transform .3s var(--hm-spring);
}
.wk__chip:hover { color: var(--hm-ink); border-color: var(--hm-line); transform: translateY(-1px); }
.wk__chip.is-on { background: var(--hm-ink); border-color: var(--hm-ink); color: #fff; }
.wk__chip:focus-visible { outline: 2px solid var(--hm-blue); outline-offset: 2px; }

.works .wk__empty {
  margin: 0; padding: 40px 0; font-size: 15px; color: var(--hm-gray-2);
}

/* ---------- grid ---------- */
.wk__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 28px);
}
.wk-card.is-hidden { display: none; }

/* ---------- card: artwork tile, then the name and date centred under it ---------- */
.wk-card { margin: 0; }
.wk-card__hit {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: center; font: inherit; color: inherit; cursor: pointer;
}
.wk-card__hit:focus-visible { outline: none; }
.wk-card__hit:focus-visible .wk-card__media {
  outline: 2px solid var(--hm-blue); outline-offset: 3px;
}

.wk-card__media {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 22px); background: var(--hm-card);
  transition: box-shadow .45s var(--hm-ease), transform .45s var(--hm-spring);
}
.wk-card__front {
  width: 100%; height: 100%; display: block;
  object-fit: contain; padding: 7% 6% 5%;
  transition: transform .7s var(--hm-ease);
}
/* full-bleed artwork (a photograph, a title slide, a collage that runs off the
   edge) has no transparency to breathe into, so it fills the tile instead */
.wk-card__media--flush .wk-card__front { object-fit: cover; padding: 0; }

.wk-card__hit:hover .wk-card__media {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 20px 46px -20px rgba(22, 21, 21, .3);
}
.wk-card__hit:hover .wk-card__front { transform: scale(1.03); }

/* the affordance — nothing should rely on hover alone to look clickable, so this
   is a reveal on top of an already-tappable tile */
.wk-card__cue {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--hm-ink); color: #fff;
  font-size: 12px; font-weight: 500; letter-spacing: -.01em;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--hm-ease), transform .3s var(--hm-ease);
}
.wk-card__cue svg { width: 13px; height: 13px; }
.wk-card__hit:hover .wk-card__cue,
.wk-card__hit:focus-visible .wk-card__cue { opacity: 1; transform: none; }

.wk-card__foot { display: block; padding-top: 14px; }
.wk-card__name {
  display: block; font-size: clamp(14px, 1.1vw, 16px); font-weight: 500;
  line-height: 1.3; letter-spacing: -.03em; color: var(--hm-ink);
  /* one title is paper-length; the popup carries it in full */
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  display: -webkit-box;
}
.wk-card__year {
  display: block; margin-top: 3px;
  font-size: 13px; letter-spacing: -.02em; color: var(--hm-gray-2);
}
.wk-card__year:empty { display: none; }

/* Entrance — transform/opacity only, armed by JS (.is-anim) so that if the
   script never runs the cards are simply visible rather than stuck at 0. */
.works.is-anim .wk-card { opacity: 0; transform: translateY(18px); }
.works.is-anim .wk-card.is-in { opacity: 1; transform: none;
  transition: opacity .55s var(--hm-ease), transform .6s var(--hm-ease);
  transition-delay: calc(var(--d, 1) * 40ms); }

/* ============================================================
   The popup — horizontal: artwork on the left, the writing on
   the right. Deliberately a preview, not a page.
   ============================================================ */
.wkm { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: clamp(14px, 3vh, 40px); }
.wkm[hidden] { display: none; }
.wkm__scrim {
  position: absolute; inset: 0; border: 0; padding: 0;
  background: rgba(22, 21, 21, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--hm-ease);
}
.wkm.is-in .wkm__scrim { opacity: 1; }

.wkm__dialog {
  position: relative; z-index: 1;
  width: min(940px, 100%); max-height: min(86vh, 700px);
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(22, 21, 21, .45), 0 2px 6px rgba(22, 21, 21, .08);
  font-family: var(--hm-font); color: var(--hm-ink);
  opacity: 0; transform: scale(.965) translateY(10px);
  transition: opacity .28s var(--hm-ease), transform .34s var(--hm-ease);
}
.wkm.is-in .wkm__dialog { opacity: 1; transform: none; }
.wkm__dialog:focus { outline: none; }

.wkm__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .82); color: var(--hm-ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(22, 21, 21, .14);
  transition: background .22s var(--hm-ease), color .22s var(--hm-ease);
}
.wkm__close svg { width: 16px; height: 16px; }
.wkm__close:hover { background: var(--hm-ink); color: #fff; }

/* The media column fills its half; contain, never crop, because these run from
   square cutouts to wide title slides to 4:3 footage. The shot is positioned
   absolutely inside it: as a centred grid/flex child, its height:100% would
   resolve against an auto-sized track — i.e. as auto — and a tall image then
   overflowed the box and ran across the text on narrow screens. */
.wkm__media { position: relative; background: var(--hm-card); overflow: hidden; min-height: 0; }
.wkm__media :is(img, video) {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; object-fit: contain; padding: 22px;
}
.wkm__media:empty { display: none; }
.wkm__media:empty + .wkm__body { grid-column: 1 / -1; }

.wkm__body {
  min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 38px);
  align-content: start;
}
.wkm__eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  /* the page's own gold, not the system blue — deepened for legibility at 11.5px */
  color: var(--hm-accent-ink);
}
.wkm__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
/* no date (the industrial-design stubs) → drop the separator too */
.wkm__eyebrow:has([data-wkm-year]:empty) .wkm__dot { display: none; }
.wkm__title {
  margin: 0 0 14px; font-size: clamp(22px, 2.2vw, 29px); font-weight: 500;
  line-height: 1.1; letter-spacing: -.04em; color: var(--hm-ink);
}
.wkm__copy .wk-card__shot { display: none; }        /* the media is hoisted out */
/* recognition sits directly under the title — the same plaques the featured
   cards carry on the homepage, on their own line so the copy still starts flush */
.wkm__copy .wkm-awards {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0 0 clamp(16px, 1.8vw, 22px); padding: 0; list-style: none;
}
.wkm__copy .wkm-awards img {
  display: block; height: clamp(46px, 4.4vw, 58px); width: auto; max-width: 88px;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(22, 21, 21, .15));
  transition: transform .45s var(--hm-ease);
}
.wkm__copy .wkm-awards li:nth-child(1) img { transform: rotate(-2.5deg); }
.wkm__copy .wkm-awards li:nth-child(2) img { transform: rotate(3deg); }
.wkm__copy .wkm-awards li:hover img { transform: translateY(-4px) rotate(0); }
.wkm__copy .wk-card__sub {
  margin: 0 0 12px; font-size: clamp(15px, 1.2vw, 17px); font-weight: 500;
  line-height: 1.4; letter-spacing: -.02em; color: var(--hm-ink);
}
.wkm__copy .wk-card__desc {
  margin: 0 0 18px; font-size: 14.5px; line-height: 1.62;
  letter-spacing: -.005em; color: var(--hm-gray-3);
}
.wkm__copy .wk-card__role {
  margin: 0; padding-top: 16px; border-top: 1px solid var(--hm-line-soft);
  font-size: 13.5px; line-height: 1.5; color: var(--hm-ink);
}
.wkm__copy .wk-card__role b {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hm-gray-2);
}
.wkm__copy .wk-card__note {
  display: block; margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--hm-gray-3);
}
.wkm__copy .wk-card__cta {
  margin: 20px 10px 0 0; display: inline-flex; align-items: center; gap: 9px;
  border: 0; cursor: pointer; font: inherit; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: -.02em;
  background: var(--hm-ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  transition: transform .45s var(--hm-spring), box-shadow .45s var(--hm-spring);
}
/* the homepage's pills never change colour on hover — they lift and cast a
   shadow, and this one now does the same */
.wkm__copy .wk-card__cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(22, 21, 21, .22);
}

/* projects whose write-up isn't published yet: the same pill shape so the
   popup keeps its rhythm, but hollow and inert — it states a fact, it is not
   something to click (hence a span, not a disabled button in the tab order) */
.wkm__copy .wk-card__cta--soon {
  background: none;
  color: var(--hm-gray-2);
  border: 1.3px dashed var(--hm-line);
  padding: 11px 19px;
  cursor: default;
}
.wkm__copy .wk-card__cta--soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hm-accent); opacity: .75;
}
.wkm__copy .wk-card__cta--soon:hover { background: none; transform: none; }

/* work that is contractually closed rather than merely unfinished: a solid
   hairline (nothing is coming later) and a padlock instead of the pending dot */
.wkm__copy .wk-card__cta--nda {
  background: none;
  color: var(--hm-gray-2);
  border: 1.3px solid var(--hm-line);
  padding: 11px 19px;
  cursor: default;
}
.wkm__copy .wk-card__cta--nda svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.wkm__copy .wk-card__cta--nda:hover { background: none; transform: none; }

body.wkm-open { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) { .wk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .wk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk__chip { font-size: 14px; padding: 9px 15px; }
  /* the popup stacks: artwork above, writing below */
  .wkm__dialog {
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
    max-height: 88vh; border-radius: 18px;
  }
  .wkm__media { aspect-ratio: 4 / 3; }
  .wkm__media :is(img, video) { padding: 16px; }
}
@media (max-width: 430px) {
  .wk__grid { grid-template-columns: 1fr; gap: 26px; }
  .wk-card__media { aspect-ratio: 4 / 3.4; }
}

@media (prefers-reduced-motion: reduce) {
  .works.is-anim .wk-card, .works.is-anim .wk-card.is-in { opacity: 1; transform: none; transition: none; }
  .wk-card__media, .wk-card__front, .wk-card__cue,
  .wkm__scrim, .wkm__dialog, .wk__close, .wk__chip { transition: none; }
  .wk-card__cue { opacity: 1; transform: none; }
  .wkm__dialog { opacity: 1; transform: none; }
  .wkm__scrim { opacity: 1; }
}