/* 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-home-work] {
  padding-block: var(--space-2xl) var(--space-xl);
  background-color: var(--white);
  background-image: linear-gradient(#16131b0b 1px, #0000 1px), linear-gradient(90deg, #16131b0b 1px, #0000 1px);
  background-position: top;
  background-size: 56px 56px;
  position: relative;
  overflow: hidden;
}
.work__head[data-c-home-work] {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  display: flex;
}
.work__count[data-c-home-work] {
  align-items: center;
  gap: 0.75rem;
  display: flex;
}
.work__count-num[data-c-home-work] {
  font-family: var(--font-display);
  letter-spacing: -0.06em;
  color: #0000;
  -webkit-text-stroke: 2px var(--ink);
  font-size: clamp(4rem, 3rem + 4vw, 7.5rem);
  font-weight: 800;
  line-height: 0.8;
}
.work__count-label[data-c-home-work] {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}
.hs__viewport[data-c-home-work] {
  --cw: min(100vw - var(--gutter) * 2, var(--container));
  border-radius: var(--radius-xl);
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overflow-x: auto;
}
.hs__viewport[data-c-home-work]::-webkit-scrollbar {
  display: none;
}
.hs__track[data-c-home-work] {
  gap: var(--space-m);
  width: max-content;
  margin: 0;
  padding: 0;
  display: flex;
}
.proj[data-c-home-work] {
  --card-bg: var(--night);
  --card-fg: var(--white);
  --card-muted: #ffffffb8;
  --card-line: #fff3;
  --card-accent: var(--sun);
  width: min(calc(var(--cw) * 0.84), 1040px);
  scroll-snap-align: start;
  flex: none;
}
.proj__card[data-c-home-work] {
  gap: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  height: 100%;
  color: var(--card-fg);
  isolation: isolate;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.75rem);
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #16131b0f;
}
.proj__card[data-c-home-work]:before,
.proj__card[data-c-home-work]:after {
  content: "";
  z-index: -1;
  aspect-ratio: 1;
  filter: blur(70px);
  opacity: 0.6;
  border-radius: 46% 54% 58% 42%/52% 44% 56% 48%;
  width: 60%;
  position: absolute;
}
.proj__card[data-c-home-work]:before {
  background: var(--glow-a, var(--tangerine));
  top: -30%;
  right: -20%;
}
.proj__card[data-c-home-work]:after {
  background: var(--glow-b, var(--aqua));
  opacity: 0.4;
  bottom: -40%;
  left: -25%;
}
.proj--clay[data-c-home-work] {
  --card-bg: var(--peach);
  --card-fg: var(--ink);
  --card-muted: var(--ink-2);
  --card-line: #16131b26;
  --card-accent: var(--tangerine-deep);
  --glow-a: var(--white);
  --glow-b: var(--aqua);
}
.proj--saffron[data-c-home-work] {
  --card-bg: var(--aqua-soft);
  --card-fg: var(--ink);
  --card-muted: var(--ink-2);
  --card-line: #16131b26;
  --card-accent: var(--aqua-deep);
  --glow-a: var(--sun);
  --glow-b: var(--white);
}
.proj__media[data-c-home-work] {
  perspective: 1400px;
}
.proj__browser[data-c-home-work] {
  border-radius: var(--radius-m);
  transition: transform 0.8s var(--ease-out);
  background: #ffffffeb;
  padding: 7px;
  display: block;
  transform: rotateY(-8deg) rotateX(4deg);
  box-shadow: 0 30px 60px -30px #0000008c;
}
.proj__card[data-c-home-work]:hover .proj__browser[data-c-home-work] {
  transform: none;
}
.proj__bar[data-c-home-work] {
  align-items: center;
  gap: 5px;
  padding: 5px 8px 10px;
  display: flex;
}
.proj__bar[data-c-home-work] i[data-c-home-work] {
  border-radius: 50%;
  width: 9px;
  height: 9px;
}
.proj__bar[data-c-home-work] i[data-c-home-work]:first-child {
  background: var(--tangerine);
}
.proj__bar[data-c-home-work] i[data-c-home-work]:nth-child(2) {
  background: var(--sun);
}
.proj__bar[data-c-home-work] i[data-c-home-work]:nth-child(3) {
  background: var(--aqua);
}
.proj__url[data-c-home-work] {
  border-radius: var(--radius-pill);
  background: var(--cream-2);
  color: var(--ink-3);
  margin-left: 0.6rem;
  padding: 0.15rem 0.8rem;
  font-size: 0.72rem;
}
.proj__shot[data-c-home-work] {
  aspect-ratio: 16/11;
  border-radius: 12px;
  display: block;
  overflow: hidden;
}
.proj__shot[data-c-home-work] img {
  object-fit: cover;
  object-position: 50% 0%;
  width: 100%;
  height: 100%;
  transition: object-position 2.6s var(--ease-in-out);
}
.proj__card[data-c-home-work]:hover .proj__shot[data-c-home-work] img {
  object-position: 50% 100%;
}
.proj__info[data-c-home-work] {
  gap: var(--space-s);
  flex-direction: column;
  display: flex;
  position: relative;
}
.proj__index[data-c-home-work] {
  font-family: var(--font-display);
  letter-spacing: -0.06em;
  color: #0000;
  -webkit-text-stroke: 1.5px var(--card-line);
  font-size: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  font-weight: 800;
  line-height: 0.8;
  position: absolute;
  top: -0.2em;
  right: 0;
}
.proj__meta[data-c-home-work] {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-accent);
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
}
.proj__client[data-c-home-work] {
  font-size: 1.05rem;
  font-weight: 700;
}
.proj__title[data-c-home-work] {
  font-size: var(--step-3);
  max-width: 18ch;
  line-height: 1.06;
}
.proj__scope[data-c-home-work] {
  flex-wrap: wrap;
  gap: 0.4rem;
  display: flex;
}
.proj__scope[data-c-home-work] li[data-c-home-work] {
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--card-line);
  padding: 0.3rem 0.75rem;
  font-size: 0.84rem;
}
.proj__link[data-c-home-work] {
  border-radius: var(--radius-pill);
  background: var(--card-fg);
  color: var(--card-bg);
  transition: transform 0.4s var(--ease-spring);
  align-self: flex-start;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding: 0.35rem 0.35rem 0.35rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}
.proj__link[data-c-home-work] span[data-c-home-work] {
  background: var(--grad-warm);
  width: 34px;
  height: 34px;
  color: var(--ink);
  transition: transform 0.45s var(--ease-spring);
  border-radius: 50%;
  place-items: center;
  display: grid;
}
.proj__link[data-c-home-work]:hover {
  transform: translateY(-2px);
}
.proj__link[data-c-home-work]:hover span[data-c-home-work] {
  transform: rotate(45deg);
}
.proj[data-c-home-work] [data-c-home-work]:focus-visible {
  outline-color: var(--card-accent);
}
.proj--end[data-c-home-work] {
  width: min(calc(var(--cw) * 0.62), 460px);
}
.proj__end[data-c-home-work] {
  align-content: center;
  justify-items: start;
  gap: var(--space-m);
  height: 100%;
  min-height: 360px;
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: #ffffffb3;
  border: 2px dashed #16131b2e;
  display: grid;
}
.proj__end-kicker[data-c-home-work] {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
}
.proj__end-title[data-c-home-work] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  letter-spacing: -0.04em;
  line-height: 1.06;
}
.hs__controls[data-c-home-work] {
  margin-top: var(--space-s);
  align-items: center;
  gap: 1rem;
  display: flex;
}
.hs__nav[data-c-home-work] {
  gap: 0.5rem;
  display: flex;
}
.hs__btn[data-c-home-work] {
  background: var(--ink);
  width: 44px;
  height: 44px;
  color: var(--white);
  transition:
    transform 0.4s var(--ease-spring),
    opacity var(--dur);
  border: 0;
  border-radius: 50%;
  place-items: center;
  display: grid;
}
.hs__btn[data-c-home-work]:active {
  transform: scale(0.9);
}
.hs__btn[data-c-home-work]:disabled {
  opacity: 0.3;
}
@media (width>=900px) {
  .hs__nav[data-c-home-work] {
    display: none;
  }
}
.hs__progress[data-c-home-work] {
  flex: 1;
  align-items: center;
  gap: 1rem;
  display: flex;
}
.hs__hint[data-c-home-work] {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
}
.hs__hint-desk[data-c-home-work] {
  display: none;
}
@media (width>=900px) {
  .hs__hint-desk[data-c-home-work] {
    display: inline;
  }
  .hs__hint-touch[data-c-home-work] {
    display: none;
  }
}
.hs__bar[data-c-home-work] {
  background: #16131b14;
  border-radius: 4px;
  flex: 1;
  height: 4px;
  position: relative;
  overflow: hidden;
}
.hs__bar[data-c-home-work] span[data-c-home-work] {
  border-radius: inherit;
  background: var(--grad-brand);
  transform-origin: 0;
  transform: scaleX(var(--p, 0.08));
  position: absolute;
  inset: 0;
}
@media (width<=899px) {
  .proj__card[data-c-home-work] {
    gap: var(--space-m);
    padding: 1rem 1rem 1.25rem;
  }
  .proj__scope[data-c-home-work],
  .proj__index[data-c-home-work],
  .proj__time[data-c-home-work] {
    display: none;
  }
  .proj__shot[data-c-home-work] {
    aspect-ratio: 16/10;
  }
  .proj__browser[data-c-home-work] {
    transform: none;
  }
  .proj__title[data-c-home-work] {
    font-size: var(--step-2);
    max-width: none;
  }
  .proj__info[data-c-home-work] {
    gap: 0.6rem;
  }
  .proj__link[data-c-home-work] {
    margin-top: 0.4rem;
  }
}
@media (width>=900px) {
  .proj__card[data-c-home-work] {
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    min-height: min(560px, 100vh - 16rem);
  }
  .proj__media[data-c-home-work] {
    align-self: center;
  }
  .proj__info[data-c-home-work] {
    padding-block: 0.5rem;
  }
}
.hs-active .hs__viewport[data-c-home-work] {
  scroll-snap-type: none;
  overflow: clip;
}
.hs-active .hs__track[data-c-home-work] {
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .proj__browser[data-c-home-work],
  .proj__shot[data-c-home-work] img {
    transition: none;
    transform: none;
  }
}