/* Work page: one project per row in a calm alternating showcase. */

:root {
  --wx-line: rgba(20, 18, 31, 0.16);
}

/* Opening dateline, retained from the approved page introduction. */
.wx-deskline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 18px;
  margin-top: clamp(26px, 4vh, 42px);
  padding-top: 18px;
  border-top: 1px solid var(--wx-line);
  color: var(--warm-gray);
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  animation: pgin 0.9s var(--e-expo) 0.84s forwards;
}

.wx-deskline b {
  color: var(--zone);
  font-weight: 500;
}

.wx-d {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  white-space: nowrap;
}

.wx-d + .wx-d::before {
  content: '✦';
  color: var(--warm-gray);
  font-size: 0.55rem;
  opacity: 0.55;
}

.work-showcase {
  --work-zone: #F4F1EA;
  position: relative;
  padding: clamp(72px, 10vw, 132px) 0 clamp(88px, 12vw, 156px);
  overflow: clip;
  /* The body-wide ambient dot screen continues in from the hero and dissolves
     under the paper over the first few hundred pixels — no hard edge where the
     hero meets the showcase. */
  background: linear-gradient(180deg, rgba(251, 248, 243, 0) 0%, var(--paper) clamp(280px, 34vh, 420px));
  color: var(--ink);
}

.work-list,
.work-fallback {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 1340px);
  margin-inline: auto;
}

.work-project {
  position: relative;
  width: 56.6%;
  margin-bottom: 96px;
  color: inherit;
}

/* The ground stays cream (the hero's colour continues down). Each project pools
   its own soft tint behind its image and fades to nothing at the edges, so
   moving from one brand to the next is a seamless wash, not a hard switch. The
   pool fades in with the reveal and out as the project scrolls away. */
.work-project::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -22% -26% -18% -26%;
  background: radial-gradient(60% 62% at 50% 42%, var(--proj-tint, transparent) 0%, transparent 72%);
  opacity: 0;
  transition: opacity 1000ms var(--e-quint);
  pointer-events: none;
}

.work-motion-ready .work-project.is-visible::before {
  opacity: 1;
}

/* Without motion (or before scripts run) the wash is simply present. */
.work-showcase:not(.work-motion-ready) .work-project::before {
  opacity: 1;
}

.work-project:last-child {
  margin-bottom: 0;
}

.work-project:nth-child(odd) {
  margin-right: auto;
}

.work-project:nth-child(even) {
  margin-left: auto;
}

.work-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}

.work-media picture,
.work-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.work-media img {
  object-fit: cover;
  filter: none;
}

.work-meta {
  margin-top: 21px;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 31px;
  margin-bottom: 14px;
}

.work-tag {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20, 18, 31, 0.07);
  color: var(--soft-ink);
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* On a light tint the tag keeps a subtle ink chip — slightly deeper so it
   still reads against the wash. */
.has-zones .work-tag {
  background: rgba(20, 18, 31, 0.06);
  color: var(--soft-ink);
}

.work-title {
  margin: 0;
  color: inherit;
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 4.2vw, 3.4rem);
  font-weight: 400;
  font-variation-settings: var(--fx-d);
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}

.work-description {
  max-width: 100%;
  margin: 13px 0 18px;
  color: var(--soft-ink);
  font-size: clamp(1.08rem, 1.55vw, 1.25rem);
  line-height: 1.35;
}

@media (min-width: 561px) {
  .work-description {
    white-space: nowrap;
  }
}

.has-zones .work-description {
  color: var(--soft-ink);
}

.work-study-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

.work-study-link .work-arrow {
  transition: transform 400ms var(--e-quint);
}

@media (hover: hover) {
  .work-study-link:hover .work-arrow,
  .work-media:hover + .work-meta .work-study-link .work-arrow {
    transform: translateX(4px);
  }
}

/* Motion is opt-in so failed or absent scripts leave every project visible.
   The frame opens like a shutter (clip-path) while its image settles from a
   gentle zoom. The open fires as the project reaches the middle band of the
   viewport (where the eye is), and it animates closed again only once it has
   nearly left the viewport — see the paired observers in work.js. */
.work-motion-ready .work-project:not(.is-visible) .work-media {
  opacity: 0;
  transform: translateY(72px) scale(0.955);
  clip-path: inset(22% 5% 22% 5% round 14px);
}

.work-motion-ready .work-project:not(.is-visible) .work-media img {
  transform: scale(1.16);
}

.work-motion-ready .work-project:not(.is-visible) .work-meta > * {
  opacity: 0;
  transform: translateY(30px);
}

.work-motion-ready .work-media {
  clip-path: inset(0% 0% 0% 0% round 14px);
  transition: opacity 1000ms var(--e-expo), transform 1050ms var(--e-expo),
    clip-path 1050ms var(--e-expo);
  will-change: opacity, transform, clip-path;
}

.work-motion-ready .work-media img {
  transition: transform 1400ms var(--e-expo);
  will-change: transform;
}

.work-motion-ready .work-meta > * {
  transition: opacity 620ms var(--e-quint), transform 620ms var(--e-quint);
}

.work-motion-ready .work-tags {
  transition-delay: 100ms;
}

.work-motion-ready .work-title {
  transition-delay: 160ms;
}

.work-motion-ready .work-description {
  transition-delay: 220ms;
}

.work-motion-ready .work-study-link {
  transition-delay: 280ms;
}

.work-project.is-visible .work-media,
.work-project.is-visible .work-meta > * {
  opacity: 1;
  transform: none;
}

.work-project.is-visible .work-media img {
  transform: scale(1);
}

.work-fallback {
  padding-left: 1.4rem;
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.work-fallback li + li {
  margin-top: 0.75rem;
}

.work-fallback a {
  color: inherit;
}

@media (max-width: 900px) {
  .work-project {
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 560px) {
  .work-showcase {
    padding-top: 64px;
  }

  .work-list,
  .work-fallback {
    width: calc(100% - 40px);
  }

  .work-project {
    margin-bottom: 64px;
  }

  .work-meta {
    margin-top: 18px;
  }

  .work-title {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wx-deskline {
    opacity: 1;
    animation: none;
  }

  .work-showcase,
  .work-showcase.has-zones {
    color: var(--ink);
    transition: none;
  }

  .work-project .work-media,
  .work-project .work-meta > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .work-project .work-media {
    clip-path: none;
  }

  .work-project .work-media img {
    transform: none;
  }

  .work-tag {
    background: rgba(20, 18, 31, 0.07);
    color: var(--soft-ink);
  }

  .work-description {
    color: var(--soft-ink);
  }

  .work-study-link .work-arrow {
    transition: none;
  }
}