/* Ported from the reference build by tools/port/css.mjs. Do not edit; edit the generator or override in assets/css/theme/. */
.work[data-c-a-home-work] .sh {
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.work__all[data-c-a-home-work] {
  font-weight: var(--fw-medium);
  color: var(--cobalt);
  align-items: center;
  gap: 6px;
  text-decoration: none;
  display: inline-flex;
}
.work__all[data-c-a-home-work] svg {
  transition: translate var(--dur-3) var(--ease-spring);
}
.work__all[data-c-a-home-work]:hover svg {
  translate: 3px;
}
.shot__case[data-c-a-home-work] {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--cobalt);
  align-items: center;
  gap: 6px;
  text-decoration: none;
  display: inline-flex;
}
.shot__case[data-c-a-home-work] svg {
  transition: translate var(--dur-3) var(--ease-spring);
}
.shot__case[data-c-a-home-work]:hover svg {
  translate: 3px;
}
.reel[data-c-a-home-work] {
  gap: var(--s-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}
.shot[data-c-a-home-work] {
  gap: var(--s-5);
  grid-template-rows: auto 1fr;
  display: grid;
}
.shot__frame[data-c-a-home-work] {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  transition:
    transform var(--dur-4) var(--ease-out),
    box-shadow var(--dur-4) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.shot[data-c-a-home-work]:nth-child(2n) .shot__frame[data-c-a-home-work] {
  margin-top: var(--s-10);
}
.shot__bar[data-c-a-home-work] {
  border-bottom: 1px solid var(--line);
  gap: 6px;
  padding: 10px 12px;
  display: flex;
}
.shot__bar[data-c-a-home-work] i[data-c-a-home-work] {
  background: var(--paper-2);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.shot__screen[data-c-a-home-work] {
  aspect-ratio: 4/3.4;
  background: var(--paper);
  overflow: hidden;
}
.shot__screen[data-c-a-home-work] img {
  object-fit: cover;
  object-position: 50% 0%;
  width: 100%;
  height: 100%;
  transition: object-position 3.2s var(--ease-in-out);
}
.shot__frame[data-c-a-home-work]:hover,
.shot__frame[data-c-a-home-work]:focus-visible {
  box-shadow: var(--sh-3);
  transform: translateY(-6px) rotate(-0.6deg);
}
.shot__frame[data-c-a-home-work]:hover img,
.shot__frame[data-c-a-home-work]:focus-visible img {
  object-position: 50% 100%;
}
.shot__meta[data-c-a-home-work] {
  gap: var(--s-3);
  align-content: start;
  display: grid;
}
.shot__head[data-c-a-home-work] {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  display: flex;
}
.shot__name[data-c-a-home-work] {
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
}
.shot__type[data-c-a-home-work] {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
}
.shot__summary[data-c-a-home-work] {
  color: var(--muted);
  font-size: 0.92rem;
}
.shot__scope[data-c-a-home-work] {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
.shot__scope[data-c-a-home-work] li[data-c-a-home-work] {
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 3px 10px;
  font-size: 0.76rem;
}
.shot__frame--nda[data-c-a-home-work] {
  background: var(--ink);
  border-color: #0000;
}
.shot__frame--nda[data-c-a-home-work] .shot__bar[data-c-a-home-work] {
  border-color: #ffffff14;
}
.shot__frame--nda[data-c-a-home-work] .shot__bar[data-c-a-home-work] i[data-c-a-home-work] {
  background: #fff3;
}
.nda[data-c-a-home-work] {
  aspect-ratio: 4/3.4;
  align-content: center;
  justify-items: start;
  gap: var(--s-3);
  padding: var(--s-6);
  color: #ffffffb3;
  display: grid;
  position: relative;
  overflow: hidden;
}
.nda__lock[data-c-a-home-work] {
  background: var(--lime);
  width: 52px;
  height: 52px;
  color: var(--ink);
  border-radius: 16px;
  place-items: center;
  display: grid;
}
.nda__title[data-c-a-home-work] {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: #fff;
  font-size: 1.25rem;
}
.nda__body[data-c-a-home-work] {
  font-size: 0.88rem;
}
.nda__bars[data-c-a-home-work] {
  opacity: 0.18;
  gap: 8px;
  display: grid;
  position: absolute;
  inset: auto -10% 12% 40%;
  rotate: -8deg;
}
.nda__bars[data-c-a-home-work] b[data-c-a-home-work] {
  background: #fff;
  border-radius: 6px;
  height: 10px;
}
.nda__bars[data-c-a-home-work] b[data-c-a-home-work]:nth-child(2) {
  width: 70%;
}
.shot--nda[data-c-a-home-work] .shot__meta[data-c-a-home-work] {
  justify-items: start;
}
@media (width<=1100px) {
  .reel[data-c-a-home-work] {
    row-gap: var(--s-12);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width<=640px) {
  .reel[data-c-a-home-work] {
    gap: var(--s-4);
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--s-2);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    grid-template-columns: none;
    grid-auto-columns: 82%;
    grid-auto-flow: column;
    overflow-x: auto;
  }
  .reel[data-c-a-home-work]::-webkit-scrollbar {
    display: none;
  }
  .shot[data-c-a-home-work] {
    scroll-snap-align: start;
  }
  .shot[data-c-a-home-work]:nth-child(2n) .shot__frame[data-c-a-home-work] {
    margin-top: 0;
  }
}
@media (width>=1024px) {
  .work[data-c-a-home-work] .sh {
    margin-bottom: var(--head-gap);
  }
}