/*
  Works vNext — editorial portfolio archive.
  Route-scoped to body.works-page. Do not dump into global main.css.
  Modal / gallery / markdown remain in works.css (shared with Creator Profile).
*/

html:has(body.works-page),
body.works-page {
  scroll-padding-top: calc(var(--ws-nav-height, 4.5rem) + 0.75rem);
}

.works-page {
  background: var(--ws-bg-page, var(--color-surface, #0f0f10));
  color: var(--ws-text-secondary, var(--color-text, #e5e7eb));
  font-family: Inter, system-ui, sans-serif;
  min-height: 100vh;
}

.works-vnext-skip {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 120;
  padding: 0.65rem 0.9rem;
  border-radius: var(--ws-radius-pill, 999px);
  background: var(--ws-bg-surface-raised, var(--color-surface-elevated, #1a1a1b));
  color: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
  transform: translateY(-200%);
}

.works-vnext-skip:focus,
.works-vnext-skip:focus-visible {
  transform: translateY(0);
}

.works-page :focus-visible {
  outline: 2px solid var(--ws-border-focus, var(--color-focus-ring, #8a2be2));
  outline-offset: 3px;
}

.works-vnext {
  width: 100%;
  margin: 0 auto;
  padding-top: var(--ws-nav-height, 5.5rem);
  overflow-x: clip;
}

.works-vnext-arrival,
.works-vnext-section,
.works-vnext-footer__inner {
  width: min(100% - 1.5rem, 68rem);
  margin-inline: auto;
}

.works-vnext-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ws-text-muted, var(--color-muted-text, #caced3)) 88%, transparent);
}

.works-vnext-cta,
.works-vnext-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border-radius: var(--ws-radius-pill, 999px);
  font-weight: 700;
  text-decoration: none;
}

.works-vnext-cta {
  width: fit-content;
  background: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
  color: var(--ws-bg-page, var(--color-surface, #0f0f10));
}

.works-vnext-cta:hover,
.works-vnext-cta:focus-visible {
  background: var(--ws-accent, var(--color-primary, #8a2be2));
  color: var(--ws-text-inverse, #ffffff);
}

.works-vnext-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.35rem;
}

.works-vnext-arrival,
.works-vnext-section {
  scroll-margin-top: calc(var(--ws-nav-height, 4.5rem) + 0.75rem);
}

.works-vnext-arrival {
  display: grid;
  gap: 1.35rem;
  padding: 2.1rem 0 2.75rem;
  border-bottom: 1px solid var(--ws-border-subtle, var(--color-divider, #2a2a2b));
}

.works-vnext-arrival__copy {
  display: grid;
  align-content: start;
  gap: 0.95rem;
}

.works-vnext-arrival h1 {
  margin: 0;
  max-width: min(16em, 100%);
  font-size: clamp(2.45rem, 6.4vw + 0.55rem, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  text-wrap: balance;
  color: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
}

.works-vnext-lede {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  color: var(--ws-text-secondary, var(--color-text, #e5e7eb));
}

.works-vnext-arrival__figure {
  margin: 0;
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.works-vnext-arrival__media {
  overflow: hidden;
  border: 1px solid var(--ws-border-subtle, var(--color-divider, #2a2a2b));
  border-radius: 1.2rem;
  background: var(--ws-bg-surface-muted, var(--color-surface-soft, #161618));
}

.works-vnext-arrival__media img {
  display: block;
  width: 100%;
  height: 14rem;
  object-fit: cover;
  object-position: center 40%;
}

.works-vnext-arrival__caption {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
}

.works-vnext-section {
  padding: 2.55rem 0 2.2rem;
  border-bottom: 1px solid var(--ws-border-subtle, var(--color-divider, #2a2a2b));
}

.works-vnext-section--index {
  border-bottom: 0;
  padding-bottom: 3rem;
}

.works-vnext-section__header {
  max-width: 40rem;
  margin-bottom: 1.35rem;
}

.works-vnext-section__header h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.55rem, 3.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
}

.works-vnext-section__header p {
  margin: 0;
  max-width: 40rem;
  line-height: 1.65;
}

.works-vnext-meta {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
}

.works-vnext-featured {
  display: grid;
  gap: 1rem;
}

.works-vnext-feature {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--ws-border-subtle, var(--color-divider, #2a2a2b));
  border-radius: 1.2rem;
  background: var(--ws-bg-surface, var(--color-panel, #1a1a1b));
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: calc(var(--ws-nav-height, 4.5rem) + 0.75rem);
}

.works-vnext-feature:hover,
.works-vnext-feature:focus-within {
  border-color: var(--ws-accent, var(--color-primary, #8a2be2));
}

.works-vnext-feature img {
  display: block;
  width: 100%;
  height: 16rem;
  object-fit: cover;
  background: var(--ws-bg-surface-muted, var(--color-surface-soft, #161618));
}

.works-vnext-feature__body {
  display: grid;
  gap: 0.35rem;
  padding: 0 1.05rem 1.15rem;
}

.works-vnext-feature__meta {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
}

.works-vnext-feature h3 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
}

.works-vnext-feature p {
  margin: 0;
  max-width: 40rem;
  line-height: 1.55;
  color: var(--ws-text-secondary, var(--color-text, #e5e7eb));
}

.works-vnext-toolbar {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}

.works-vnext-search {
  display: grid;
  gap: 0.4rem;
}

.works-vnext-search__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
}

.works-vnext-search__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--ws-border-subtle, var(--color-divider, #2a2a2b));
  border-radius: 0.85rem;
  background: var(--ws-bg-surface, var(--color-panel, #1a1a1b));
  color: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
  font: inherit;
}

.works-vnext-search__input::placeholder {
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
}

.works-vnext-toolbar__filters {
  display: grid;
  gap: 1rem;
}

.works-vnext-filter-group {
  display: grid;
  gap: 0.45rem;
}

.works-page .works-vnext .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.works-page .works-vnext .filter-chip {
  min-height: 2.35rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--ws-border-subtle, var(--color-divider, #2a2a2b));
  border-radius: var(--ws-radius-pill, 999px);
  background: transparent;
  color: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.works-page .works-vnext .filter-chip:hover,
.works-page .works-vnext .filter-chip:focus-visible {
  background: var(--ws-accent, var(--color-primary, #8a2be2));
  border-color: var(--ws-accent, var(--color-primary, #8a2be2));
  color: var(--ws-text-inverse, #ffffff);
  cursor: pointer;
}

.works-page .works-vnext .filter-chip.is-active {
  background: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
  border-color: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
  color: var(--ws-bg-page, var(--color-surface, #0f0f10));
}

.works-page .works-vnext .filter-chip.is-active:hover,
.works-page .works-vnext .filter-chip.is-active:focus-visible {
  background: var(--ws-accent, var(--color-primary, #8a2be2));
  border-color: var(--ws-accent, var(--color-primary, #8a2be2));
  color: var(--ws-text-inverse, #ffffff);
}

.works-vnext-grid {
  display: grid;
  gap: 0.85rem;
}

.works-vnext-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ws-border-subtle, var(--color-divider, #2a2a2b));
  border-radius: 1.2rem;
  background: var(--ws-bg-surface, var(--color-panel, #1a1a1b));
  color: inherit;
  text-align: left;
  cursor: pointer;
  scroll-margin-top: calc(var(--ws-nav-height, 4.5rem) + 0.75rem);
}

.works-vnext-card:hover,
.works-vnext-card:focus-within {
  border-color: var(--ws-accent, var(--color-primary, #8a2be2));
}

.works-vnext-card img {
  display: block;
  width: 100%;
  height: 12.5rem;
  object-fit: cover;
  background: var(--ws-bg-surface-muted, var(--color-surface-soft, #161618));
}

.works-vnext-card__body {
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem 1.05rem 1.1rem;
}

.works-vnext-card__kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
}

.works-vnext-card h3 {
  margin: 0;
  font-size: 1.12rem;
  color: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
}

.works-vnext-card__meta {
  margin: 0;
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
}

.works-vnext-card__text {
  margin: 0;
  line-height: 1.5;
}

.works-vnext-card__open {
  margin-top: 0.25rem;
  justify-self: start;
  min-height: 2.35rem;
  padding: 0 0.95rem;
  border: 0;
  border-radius: var(--ws-radius-pill, 999px);
  background: var(--ws-text-primary, var(--color-text-strong, #f3f3f5));
  color: var(--ws-bg-page, var(--color-surface, #0f0f10));
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.works-page .works-vnext-card__open:hover,
.works-page .works-vnext-card__open:focus-visible {
  background: var(--ws-accent, var(--color-primary, #8a2be2));
  color: var(--ws-text-inverse, #ffffff);
  cursor: pointer;
}

.works-vnext-empty {
  margin: 0;
  padding: 1.25rem 0;
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
}

.works-vnext-footer {
  border-top: 1px solid var(--ws-border-subtle, var(--color-divider, #2a2a2b));
  background: var(--ws-bg-shell, var(--color-panel, #1a1a1b));
}

.works-vnext-footer__inner {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.4rem 0;
  text-align: center;
}

.works-vnext-footer img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}

.works-vnext-footer p {
  margin: 0;
  color: var(--ws-text-muted, var(--color-muted-text, #caced3));
  font-size: 0.85rem;
}

.works-vnext-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.works-vnext-footer__links a {
  color: var(--ws-text-secondary, var(--color-text, #e5e7eb));
  font-size: 0.95rem;
  text-decoration: none;
}

.works-vnext-footer__links a:hover,
.works-vnext-footer__links a:focus-visible {
  color: var(--ws-accent, var(--color-primary, #8a2be2));
}

.works-page--motion [data-works-reveal] {
  --works-ry: 14px;
  opacity: 0;
  transform: translateY(var(--works-ry));
  will-change: transform, opacity;
}

.works-page--motion [data-works-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
  animation: works-vnext-enter 420ms cubic-bezier(0.14, 0.86, 0.22, 1) both;
  animation-delay: var(--works-reveal-delay, 0ms);
}

.works-page--motion .works-vnext-arrival__copy[data-works-reveal] {
  --works-ry: 12px;
}

.works-page--motion .works-vnext-arrival__figure[data-works-reveal] {
  --works-ry: 16px;
  --works-reveal-delay: 80ms;
}

.works-page--motion .works-vnext-section__header[data-works-reveal].is-revealed,
.works-page--motion .works-vnext-toolbar[data-works-reveal].is-revealed {
  animation-duration: 480ms;
}

@keyframes works-vnext-enter {
  0% {
    opacity: 0.4;
    transform: translateY(var(--works-ry, 14px));
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  .works-vnext-arrival {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    align-items: start;
    gap: 1.75rem;
  }

  .works-vnext-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-vnext-featured:has(.works-vnext-feature:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .works-vnext-toolbar__filters {
    grid-template-columns: 1fr 1fr;
  }

  .works-vnext-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .works-vnext-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .works-vnext-arrival__media img {
    height: 16.5rem;
  }
}

@media (max-width: 767px) {
  .works-vnext-arrival {
    padding-top: 1.65rem;
    gap: 0.9rem;
  }

  .works-vnext-arrival h1 {
    font-size: clamp(2.15rem, 11vw, 3.1rem);
  }

  .works-vnext-arrival__media img,
  .works-vnext-feature img,
  .works-vnext-card img {
    height: 11.5rem;
  }

  .works-vnext-section {
    padding-block: 2.1rem 1.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .works-vnext-card__open,
  .works-page .works-vnext .filter-chip {
    transition: none;
  }

  .works-page--motion [data-works-reveal],
  .works-page--motion [data-works-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto;
  }
}