/* ============================================================
   Work page: the same drafting sheet as the home page. Hairline
   cells, paper and ink, one blue. Loaded after styles.css.
   ============================================================ */
.wk {
  --wk-ink: var(--content--primary);
  --wk-rule: color-mix(in srgb, var(--brand-ink) 20%, transparent);
  --wk-quiet: color-mix(in srgb, var(--brand-ink) 68%, transparent);
  --wk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--wk-ink);
  text-decoration: none;
}
.wk a {
  text-decoration: none;
}
:where(.wk-page) a {
  color: inherit;
}
.wk-skip {
  position: absolute;
  left: 1.6rem;
  top: -10rem;
  z-index: 100;
  padding: 1rem 1.6rem;
  background: var(--wk-ink);
  color: var(--content--paper);
  font-size: 1.4rem;
}
.wk-skip:focus {
  top: 1.6rem;
}
.wk-page {
  margin: 0.8rem;
  border: var(--size--border) solid var(--wk-rule);
}

/* Header */
.wk-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 5.2rem;
  border-bottom: var(--size--border) solid var(--wk-rule);
  background-color: var(--content--paper);
  background-image: var(--bg-img);
}
.wk-brand {
  display: flex;
  align-items: center;
  padding: 0 3.2rem;
}
.wk-nav {
  display: flex;
}
.wk-nav-item {
  display: flex;
  align-items: center;
  min-width: 14rem;
  padding: 0 2.4rem;
  border-left: var(--size--border) solid var(--wk-rule);
  color: var(--content--brand);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.wk-nav-item:hover,
.wk-nav-item:focus-visible {
  background-color: var(--content--brand);
  color: var(--content--paper);
}
.wk-nav-item.is-current {
  background-color: var(--content--brand);
  color: var(--content--lime);
}
.wk-menu-btn {
  display: none;
}

/* Mobile: logo + Menu cell, links drop down as a full-width panel (same as home). */
@media only screen and (max-width: 767px) {
  .wk-brand {
    flex: 1;
    padding: 0 1.6rem;
  }
  .wk-menu-btn {
    display: flex;
    flex: 0 0 50%;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.6rem;
    border: 0;
    border-left: var(--size--border) solid var(--wk-rule);
    background: none;
    color: var(--content--brand);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .wk-menu-ic {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 1.6rem;
  }
  .wk-menu-ic span {
    height: max(1px, 0.1rem);
    background-color: var(--wk-ink);
    transition: transform 0.4s var(--wk-ease), opacity 0.2s ease;
  }
  .wk-header.is-open .wk-menu-ic span:nth-child(1) {
    transform: translateY(calc(0.3rem + max(1px, 0.1rem))) rotate(45deg);
  }
  .wk-header.is-open .wk-menu-ic span:nth-child(2) {
    transform: rotate(-45deg);
  }
  .wk-header.is-open .wk-menu-ic span:nth-child(3) {
    opacity: 0;
  }
  .wk-nav {
    position: absolute;
    top: 100%;
    left: calc(var(--size--border) * -1);
    right: calc(var(--size--border) * -1);
    flex-direction: column;
    border: var(--size--border) solid var(--wk-rule);
    border-top: 0;
    background-color: var(--content--paper);
    visibility: hidden;
    clip-path: inset(0 0 100%);
    transition: clip-path 0.4s var(--wk-ease), visibility 0s 0.4s;
  }
  .wk-header.is-open .wk-nav {
    visibility: visible;
    clip-path: inset(0 0 -1px);
    transition: clip-path 0.4s var(--wk-ease), visibility 0s;
  }
  .wk-nav-item {
    min-width: 0;
    min-height: 5.6rem;
    padding: 0 1.6rem;
    border-left: 0;
  }
  .wk-nav-item + .wk-nav-item {
    border-top: var(--size--border) solid var(--wk-rule);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wk-menu-ic span,
  .wk-nav {
    transition-duration: 0.01s !important;
  }
}

.wk a:focus-visible,
.wk button:focus-visible {
  outline: 2px solid var(--content--brand);
  outline-offset: -2px;
}

/* Hero */
.wk-hero {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  border-bottom: var(--size--border) solid var(--wk-rule);
}
.wk-hero-title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6.4rem;
  padding: 4.8rem 3.2rem 3.2rem;
}
.wk-h1 {
  margin: 0;
  font-family: var(--brand-font);
  font-size: 11.5rem;
  word-spacing: var(--brand-word-spacing);
  font-weight: 600;
  letter-spacing: var(--brand-tracking-title);
  line-height: 1;
  text-transform: uppercase;
  color: var(--wk-ink);
}
.wk-h1-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.wk-h1-line > span {
  display: block;
  animation: wk-rise 1s var(--wk-ease) both;
}
.wk-h1-line:nth-child(2) > span {
  animation-delay: 0.09s;
}
@keyframes wk-rise {
  from { transform: translateY(105%); }
}
.wk-lede {
  max-width: 38ch;
  color: var(--wk-quiet);
  font-size: 1.8rem;
  line-height: 1.35;
}
.wk-hero-index {
  display: flex;
  flex-direction: column;
  border-left: var(--size--border) solid var(--wk-rule);
}
.wk-index-label {
  padding: 2.4rem 2.4rem 1.6rem;
  color: var(--wk-quiet);
}
.wk-filters {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wk-filters li {
  display: flex;
  flex: 1;
}
.wk-filter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 5.2rem;
  padding: 0 2.4rem;
  border: 0;
  border-top: var(--size--border) solid var(--wk-rule);
  background: transparent;
  color: var(--wk-ink);
  font: inherit;
  font-size: 2rem;
  letter-spacing: var(--brand-tracking);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, padding 0.5s var(--wk-ease);
}
.wk .wk-filter > .txt.txt-font-mono.wk-filter-count {
  align-self: center;
  color: var(--wk-quiet);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}
.wk-filter:hover,
.wk-filter:focus-visible {
  background-color: var(--content--blue-pale);
  color: var(--content--brand);
  padding-left: 3.2rem;
}
.wk-filter[aria-pressed="true"] {
  background-color: var(--wk-ink);
  color: var(--content--paper);
  padding-left: 3.2rem;
}
.wk-filter[aria-pressed="true"] .wk-filter-count {
  color: var(--content--lime);
}

.wk .wk-filter[aria-pressed="true"] > .txt.txt-font-mono.wk-filter-count {
  color: var(--content--lime);
}

/* Grid of projects. The gap is the hairline: cells sit on the rule colour. */
.wk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size--border);
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--wk-rule);
}
.wk-card {
  min-width: 0;
  background-color: var(--content--paper);
  background-image: var(--bg-img);
}
.wk-card[hidden] {
  display: none;
}
.wk-card.is-feature {
  grid-column: 1 / -1;
}
.wk-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wk-card.is-feature .wk-link {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.wk-card.is-feature.is-reverse .wk-link {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.wk-card.is-feature.is-reverse .wk-media {
  order: 2;
}

.wk-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--wk-ink);
}
.wk-card.is-feature .wk-media {
  aspect-ratio: auto;
  min-height: 42rem;
}
.wk-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.1s var(--wk-ease);
}
a.wk-link:hover .wk-media img,
a.wk-link:focus-visible .wk-media img,
.wk-card:not(:has(a.wk-link)):hover .wk-media img {
  transform: scale(1.035);
}
.wk-corner {
  position: absolute;
  width: 1.8rem;
  height: 1.8rem;
  border: 0 solid var(--content--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.6s var(--wk-ease);
}
.wk-corner.tl { top: 1.6rem; left: 1.6rem; border-top-width: 1px; border-left-width: 1px; transform: translate(0.8rem, 0.8rem); }
.wk-corner.tr { top: 1.6rem; right: 1.6rem; border-top-width: 1px; border-right-width: 1px; transform: translate(-0.8rem, 0.8rem); }
.wk-corner.bl { bottom: 1.6rem; left: 1.6rem; border-bottom-width: 1px; border-left-width: 1px; transform: translate(0.8rem, -0.8rem); }
.wk-corner.br { bottom: 1.6rem; right: 1.6rem; border-bottom-width: 1px; border-right-width: 1px; transform: translate(-0.8rem, -0.8rem); }
.wk-card:hover .wk-corner,
a.wk-link:focus-visible .wk-corner {
  opacity: 1;
  transform: none;
}

.wk-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2.4rem 2.4rem 2.8rem;
}
.wk-card.is-feature .wk-meta {
  padding: 3.2rem;
  border-left: var(--size--border) solid var(--wk-rule);
}
.wk-card.is-feature.is-reverse .wk-meta {
  border-left: 0;
  border-right: var(--size--border) solid var(--wk-rule);
}
.wk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.wk-name {
  margin: 0;
  font-family: var(--brand-font);
  font-size: 3.6rem;
  word-spacing: var(--brand-word-spacing);
  font-weight: 600;
  letter-spacing: var(--brand-tracking-title);
  line-height: 1;
  color: var(--wk-ink);
}
.wk-card.is-feature .wk-name {
  font-size: 5.2rem;
  word-spacing: var(--brand-word-spacing);
  letter-spacing: var(--brand-tracking-title);
}
.wk-arrow {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 1.3rem;
  border: var(--size--border) solid var(--wk-ink);
  border-radius: 50%;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.wk-arrow svg {
  display: block;
  transition: transform 0.5s var(--wk-ease);
}
a.wk-link:hover .wk-arrow,
a.wk-link:focus-visible .wk-arrow {
  background-color: var(--content--brand);
  border-color: var(--content--brand);
  color: var(--content--paper);
}
a.wk-link:hover .wk-arrow svg,
a.wk-link:focus-visible .wk-arrow svg {
  transform: rotate(-45deg);
}
.wk .wk-row > .txt.txt-font-mono.wk-soon {
  align-self: center;
  padding: 0.6rem 1rem;
  border: var(--size--border) dashed var(--wk-quiet);
  color: var(--wk-quiet);
  white-space: nowrap;
}
.wk-quote {
  margin: 0;
  color: var(--content--brand);
  font-size: 1.8rem;
  letter-spacing: var(--brand-tracking);
  line-height: 1.25;
}
.wk-card.is-feature .wk-quote {
  margin-top: auto;
  font-size: 2.2rem;
}
.wk-desc {
  max-width: 58ch;
  margin: 0;
  color: var(--wk-quiet);
  font-size: 1.5rem;
  line-height: 1.45;
}
.wk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.wk-card.is-feature .wk-tags {
  margin-top: 1.2rem;
}
.wk-tags li {
  padding: 0.5rem 0.9rem;
  border: var(--size--border) solid var(--wk-rule);
  font-family: var(--brand-font);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--wk-ink);
}

/* Empty state */
.wk-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 8rem 3.2rem;
  border-top: var(--size--border) solid var(--wk-rule);
}
.wk-empty[hidden] {
  display: none;
}
.wk-empty-title {
  margin: 0;
  font-family: var(--brand-font);
  font-size: 5.6rem;
  word-spacing: var(--brand-word-spacing);
  font-weight: 400;
  letter-spacing: var(--brand-tracking-display);
  line-height: 1.15;
  text-transform: uppercase;
}
.wk-empty-text {
  color: var(--wk-quiet);
}
.wk-empty-link {
  display: inline-flex;
  align-items: center;
  min-height: 4.8rem;
  margin-top: 1.2rem;
  padding: 0 2.4rem;
  background-color: var(--content--brand);
  color: var(--content--paper);
  font-size: 1.6rem;
  letter-spacing: var(--brand-tracking);
  transition: background-color 0.3s ease;
}
.wk .wk-empty-link:hover,
.wk .wk-empty-link:focus-visible {
  background-color: var(--wk-ink);
}
.wk-list-wrap {
  border-bottom: var(--size--border) solid var(--wk-rule);
}

@media only screen and (max-width: 991px) {
  .wk-h1 { font-size: 8rem; }
  .wk-card.is-feature .wk-link,
  .wk-card.is-feature.is-reverse .wk-link {
    display: flex;
  }
  .wk-card.is-feature .wk-media { min-height: 0; aspect-ratio: 16 / 9; order: 0; }
  .wk-card.is-feature.is-reverse .wk-media { order: 0; }
  .wk-card.is-feature .wk-meta,
  .wk-card.is-feature.is-reverse .wk-meta {
    padding: 2.4rem 2.4rem 2.8rem;
    border: 0;
  }
  .wk-card.is-feature .wk-name { font-size: 4.4rem; }
  .wk-card.is-feature .wk-quote { margin-top: 0; font-size: 1.8rem; }
  .wk-card.is-feature .wk-tags { margin-top: auto; }
}
@media only screen and (max-width: 767px) {
  .wk-hero { grid-template-columns: minmax(0, 1fr); }
  .wk-hero-title { gap: 3.2rem; padding: 3.2rem 1.6rem 2.4rem; }
  .wk-h1 { font-size: 5.4rem; }
  .wk-hero-index { border-left: 0; border-top: var(--size--border) solid var(--wk-rule); }
  .wk-index-label { padding: 1.6rem; }
  .wk-filters { flex-direction: row; flex: none; overflow-x: auto; scrollbar-width: none; }
  .wk-filters li { flex: 0 0 auto; }
  .wk-filter { gap: 1rem; min-height: 5.2rem; padding: 0 2rem; border-top: 0; border-left: var(--size--border) solid var(--wk-rule); white-space: nowrap; }
  .wk-filters li:first-child .wk-filter { border-left: 0; }
  .wk-filter:hover, .wk-filter:focus-visible, .wk-filter[aria-pressed="true"] { padding-left: 2rem; }
  .wk-index-label { display: none; }
  .wk-grid { grid-template-columns: 1fr; }
  .wk-meta, .wk-card.is-feature .wk-meta, .wk-card.is-feature.is-reverse .wk-meta { padding: 2rem 1.6rem 2.4rem; }
  .wk-name, .wk-card.is-feature .wk-name { font-size: 3.6rem; }
  .wk-arrow { width: 4.4rem; height: 4.4rem; padding: 1.2rem; }
  .wk-empty { padding: 5.6rem 1.6rem; }
  .wk-empty-title { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-h1-line > span { animation: none; }
  .wk-media img,
  .wk-corner,
  .wk-arrow svg,
  .wk-filter {
    transition-duration: 0.01s !important;
  }
}