/* Work only. Lenzing's unequal paired gallery, using Paak's existing type roles. */
.work-opening {
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--paak-inner-header-height) + var(--paak-lower-heading-gap))
    var(--paak-lower-gutter) var(--paak-lower-heading-gap);
}
.inner-page--work .work-opening h1 {
  --work-opening-indent: var(--paak-indent-wide);
  font-size: var(--paak-type-statement);
  line-height: var(--paak-leading-statement);
  letter-spacing: var(--paak-tracking-statement);
  text-indent: var(--work-opening-indent);
  text-wrap: pretty;
}
.work-gallery {
  margin-inline: var(--paak-lower-gutter);
  padding-bottom: var(--paak-lower-section-space);
  container-type: inline-size;
}
.work-pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--paak-lower-gap);
  align-items: center;
}
.work-pair + .work-pair {
  margin-top: clamp(80px, 10.2564cqi, 240px);
}
.work-project {
  min-width: 0;
}
.work-project:first-child {
  grid-column: 1 / span 5;
}
.work-project:nth-child(2) {
  grid-column: 7 / span 6;
}
.work-pair:nth-child(even) .work-project:first-child {
  grid-column: 1 / span 6;
}
.work-pair:nth-child(even) .work-project:nth-child(2) {
  grid-column: 8 / span 5;
}
.work-project > a {
  display: block;
  text-decoration: none;
}
.work-project figure {
  overflow: hidden;
  background: var(--paak-surface-light);
}
.work-project img {
  width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
.work-project--portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.work-project[data-project="k-golf"] img {
  object-position: 83% 50%;
}
.work-project-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.6rem;
  padding-top: 1.4rem;
  min-height: 44px;
}
.work-project-caption > * {
  min-width: 0;
}
.inner-page--work .work-project-caption h2 {
  flex: 0 0 auto;
  font-size: var(--paak-type-project-label);
  line-height: var(--paak-leading-heading);
  letter-spacing: var(--paak-tracking-heading);
  white-space: nowrap;
  text-wrap: nowrap;
  /* Home aligns its short title to the taller scope line's baseline. */
  margin-top: 0.15em;
}
.work-project-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 0.5em;
  padding: 0;
  list-style: none;
  font-size: var(--paak-type-project-label);
  line-height: var(--paak-leading-body);
  color: var(--paak-muted-on-light);
  letter-spacing: -0.01em;
  max-width: 58%;
}
.work-project-tags li {
  width: fit-content;
}
.work-project-tags li + li::before {
  content: "·";
  padding-right: 0.5em;
}
.work-project > a:is(:hover, :focus-visible) h2 {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
@media (width < 1024px) and (width >= 768px) {
  .work-project-caption {
    display: block;
  }
  .inner-page--work .work-project-caption h2 {
    margin-top: 0;
  }
  .work-project-tags {
    justify-content: flex-start;
    margin-top: 0.4rem;
    max-width: none;
  }
}
@media (width < 768px) {
  .inner-page--work .work-opening h1 {
    --work-opening-indent: 0px;
  }
  .work-pair {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--paak-lower-section-compact);
  }
  .work-pair:nth-child(n) .work-project:nth-child(n) {
    grid-column: 1;
  }
  .work-pair + .work-pair {
    margin-top: var(--paak-lower-section-compact);
  }
  .work-project-caption {
    gap: 12px;
    padding-top: 12px;
  }
}

/* Original pencil artwork occupies the open page, without a media frame. */
.work-sketch {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: var(--paak-lower-row-space);
  min-height: clamp(240px, 32svh, 480px);
}
.work-sketch-paper {
  position: relative;
  flex: 1;
  min-height: 320px;
  touch-action: pan-y;
}
.work-sketch-paper:focus-visible {
  outline: 1px dashed var(--paak-muted-on-light);
  outline-offset: 5px;
}
.work-sketch-paper > canvas,
.work-sketch-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.work-sketch-paper > canvas[hidden],
.work-sketch-fallback[hidden] {
  display: none;
}
.work-pencil {
  --pencil-x: 68%;
  --pencil-y: 65%;
  --pencil-angle: 28deg;
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 150px;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translate(var(--pencil-x), var(--pencil-y)) translate(-50%, -100%)
    rotate(var(--pencil-angle));
}
.work-sketch-paper:not([data-sketch-ready]) .work-pencil {
  left: 68%;
  top: 65%;
  --pencil-x: 0px;
  --pencil-y: 0px;
}
.work-pencil svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.work-sketch-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
@media (width < 768px) {
  .work-sketch-paper {
    min-height: 220px;
  }
  .work-sketch {
    margin-top: 28px;
    min-height: 280px;
  }
  .work-pencil {
    width: 16px;
    height: 100px;
  }
}