/* ------------------------------------------------------------------
   Work page (Figma 1380:19917). Cards, nav and footer come from styles.css.
------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* nav: WORK is the active link here (the home page pins the active width for "HOME") */
.wk-body .nav__link.is-active { width: auto; }

.wk {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 440px minmax(0, 1320px);
  column-gap: 96px;
  align-items: start;
  padding: 143px 64px 140px 0;   /* less empty space between the last cards and the footer */
}

/* ---------- sidebar (sticks while the cards scroll) ---------- */
/* the left column stays put all the way down; the footer slides up over it at the end */
.wk-side {
  position: fixed;
  z-index: 1;
  left: max(0px, calc((100vw - var(--page)) / 2));
  top: 143px;
  padding-left: var(--gutter);
  width: calc(338px + var(--gutter));
  display: flex;
  flex-direction: column;
  gap: 67px;
}
.wk-side__intro { display: flex; flex-direction: column; gap: 20px; }
.wk-side__title { display: inline-grid; grid-template: max-content / max-content; font-size: 28px; letter-spacing: -0.01em; }
.wk-side__title > * { grid-area: 1 / 1; }
.wk-side__name { font-weight: 500; color: var(--black); }
.wk-side__sub { margin-top: 40px; color: var(--grey); }
/* dotted underline under "Selected" */
.wk-side__line { margin: 72px 0 0 85px; width: 102px; height: 2px; }
.wk-side__lede { font-size: 18px; letter-spacing: -0.01em; color: var(--grey); }
/* hidden until script.js has split them into letters; the line waits for its draw-in */
.js .wk-side:not(.is-split) :is(.wk-side__name, .wk-side__sub, .wk-side__lede) { opacity: 0; }
.js .wk-side:not(.is-line-done) .wk-side__line { opacity: 0; }

/* filters — same states as the playground list view:
   hover → grey (300ms ease-out), checked → filled box + medium weight */
.wk-checks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wk-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--black);
  cursor: pointer;
  transition: color .3s cubic-bezier(0, 0, .58, 1);
}
.wk-check input { position: absolute; opacity: 0; pointer-events: none; }
.wk-check__box {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1.2px solid #b5b0af;
  border-radius: 2px;
  background: #fff;
  transition: background-color .3s cubic-bezier(0, 0, .58, 1);
}
.wk-check__box img { position: absolute; inset: -1.2px; width: 16px; height: 16px; opacity: 0; transition: opacity .3s cubic-bezier(0, 0, .58, 1); }
.wk-check:hover { color: #b5b0af; }
.wk-check input:checked ~ .wk-check__label { font-weight: 500; }
.wk-check input:checked ~ .wk-check__box { background: #b5b0af; }
.wk-check input:checked ~ .wk-check__box img { opacity: 1; }
.wk-check:hover input:checked ~ .wk-check__label { color: var(--grey); }
.wk-check input:focus-visible ~ .wk-check__box { outline: 2px solid var(--black); outline-offset: 2px; }

/* ---------- grid ---------- */
.wk-grid .card[hidden] { display: none; }
/* Designathon card: artwork not ready yet — plain grey panel as in Figma */
.card__media--soon { background: #ececec; }

/* ---------- smaller screens ---------- */
.wk-grid { grid-column: 2; }                 /* the fixed column no longer takes a grid cell */
.wk-body .footer { z-index: 2; background: #fff; }
@media (max-width: 1500px) {
  .wk { grid-template-columns: 340px minmax(0, 1fr); column-gap: 48px; padding-right: var(--gutter); }
  .wk-side { width: 340px; }
}
@media (max-width: 1200px) {
  .wk { grid-template-columns: 1fr; row-gap: 48px; padding: 120px var(--gutter) 120px; }
  .wk-side { position: static; width: auto; max-width: 440px; padding-left: 0; gap: 40px; }
  .wk-grid { grid-column: auto; }
}