.work-cover {
  --cover-accent: #d8c6fa;
  --cover-bg: #2e253f;
  --cover-ink: #faf7ff;
  display: grid;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  padding: clamp(16px, 3vw, 36px) clamp(16px, 3vw, 36px) 0;
  border: 1px solid #ffffff26;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff08, transparent 55%), var(--cover-bg);
  color: var(--cover-ink);
}
.work-cover strong {
  font-size: clamp(26px, 3.2vw, 50px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 690;
  text-wrap: balance;
}
.cover-label {
  color: var(--cover-accent);
  font-size: 11px;
  letter-spacing: .12em;
  line-height: 1.5;
}
.cover-summary { line-height: 1.5; font-size: clamp(13px, 1.25vw, 16px); }
.work-cover img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(8px, 1.4vw, 17px);
  border: 1px solid #ffffff29;
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  box-shadow: 0 10px 26px #0003;
  transition: transform .32s ease;
}
.work-cover:hover img, .work-cover:focus-visible img { transform: translateY(-4px); }
.cover-life { --cover-bg: #223348; --cover-accent: #b9d9ff; }
.cover-market { --cover-bg: #203832; --cover-accent: #b8e4cb; }
.cover-nord { --cover-bg: #e9ddcb; --cover-ink: #332922; --cover-accent: #6e5240; }
.cover-nord img { border-color: #33292238; }
.cover-studio { --cover-bg: #232e49; --cover-accent: #c7d6ff; }
@media (min-width: 801px) {
  .concept-card:nth-of-type(odd) .work-cover { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .work-cover img { transition: none; }
  .work-cover:hover img, .work-cover:focus-visible img { transform: none; }
}

.work {
  border-top-color: #ad86e147;
  background:
    radial-gradient(ellipse min(760px, 92vw) 520px at 17% 120px, #9a63da33, transparent 82%),
    radial-gradient(ellipse 66% 25% at 108% 38%, #8b58cb25, transparent 84%),
    radial-gradient(ellipse 70% 24% at -12% 70%, #9663d228, transparent 84%),
    radial-gradient(ellipse 74% 24% at 93% 89%, #7452bb20, transparent 82%);
}
.work .work-heading h2 {
  background: #30283e;
  border-color: #725989;
  border-top-color: #ac8ac9;
  box-shadow: 0 0 34px #a16adc26, 0 9px 24px #110d1c40;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal { animation: emerge-from-shadow .64s cubic-bezier(.2,.72,.27,1) backwards; }
  .scroll-reveal:focus-within { opacity: 1 !important; transform: none !important; }
}
@keyframes emerge-from-shadow {
  from { opacity: .22; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}