/* ============================================
   PROJECT PAGE — Editorial Case Study
   ============================================ */

/* --- Back link --- */
.proj-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: var(--space-12);
}

.proj-back:hover {
  text-decoration: underline;
}

.proj-back svg {
  display: none;
}

/* --- Hero --- */
.proj-hero {
  padding-top: calc(var(--header-height) + 160px);
  padding-bottom: 16px;
}

.proj-hero__number {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-12);
}

.proj-hero__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gutter);
  row-gap: 40px;
  align-items: baseline;
  margin-bottom: var(--space-8);
}

.proj-hero__title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.proj-hero__left {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.proj-hero__lead {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.5;
  max-width: 520px;
}

.proj-hero__right {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.proj-hero__excerpts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(1.5em * 3);
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-out);
}

.proj-hero__excerpts.is-expanded {
  max-height: var(--collapse-height, 4000px);
}

.proj-hero__more {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.proj-hero__more::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,4 5,7 8,4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--duration-fast) var(--ease-out);
}

.proj-hero__excerpts.is-expanded + .proj-hero__more::after {
  transform: rotate(180deg);
}

.proj-hero__more:hover {
  text-decoration: underline;
}

.proj-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
}

.proj-hero__meta-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.proj-hero__meta-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.proj-hero__meta-col p {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.5;
}

.proj-hero__excerpt {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.5;
}

/* --- Case-study hero: title on the left, meta points + description on the right --- */
.proj-hero__body--case {
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-4); /* 16px — matches the header grid so columns line up */
  row-gap: var(--space-8);
  align-items: start;
}

.proj-hero__body--case .proj-hero__title {
  grid-column: 1 / 5; /* aligned to the logo (column 1) */
  grid-row: 1;
  font-size: 44px; /* same size as the main-page hero text */
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.proj-hero__body--case {
  margin-bottom: 0;
}

.proj-hero__body--case .proj-hero__aside {
  grid-column: 5 / span 4; /* left edge = "Work", same width as the header nav */
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16); /* 64px between meta points and the description */
  font-size: 14px; /* same size as the header content */
}

.proj-hero__body--case .proj-hero__meta {
  flex-direction: column; /* stack Year / Industry / Services */
  align-items: stretch;
  gap: var(--space-3); /* 12px between Year / Industry / Services */
}

/* Match the header text size and weight (14px, semibold) throughout the aside */
.proj-hero__body--case .proj-hero__aside .proj-hero__meta-label,
.proj-hero__body--case .proj-hero__aside .proj-hero__meta-col p,
.proj-hero__body--case .proj-hero__aside .proj-hero__lead {
  font-size: 14px;
  font-weight: var(--weight-semibold);
}

.proj-hero__body--case .proj-hero__lead {
  max-width: none;
  line-height: 1.5em;
}

/* Case hero starts the same distance below the header as the main-page hero */
.proj-hero:has(.proj-hero__body--case),
.proj-hero--handdraw {
  padding-top: calc(var(--header-height) + var(--space-16));
}

/* Hand draw — main text matches the main-page hero text exactly (same
   size, weight, line-height) */
.proj-hero__title--handdraw {
  font-weight: var(--weight-semibold);
  font-size: 44px;
  line-height: 1.1em;
  max-width: 100%;
}

/* Decorative illustration pinned to the bottom-right corner, 16px from the
   bottom of the screen (same gap as the main-page hero photo) */
.proj-hero--handdraw {
  position: relative;
  min-height: 100vh;
}

.proj-hero__handdraw-illo {
  position: absolute;
  right: var(--page-margin);
  bottom: var(--space-4); /* 16px */
  width: 480px;
  height: auto;
}

@media (max-width: 600px) {
  .proj-hero__handdraw-illo {
    width: 320px;
  }
}

@media (max-width: 600px) {
  .proj-hero:has(.proj-hero__body--case),
  .proj-hero--handdraw {
    padding-top: calc(var(--header-height-mobile) + var(--space-16));
  }
}

@media (max-width: 900px) {
  .proj-hero__body--case {
    grid-template-columns: 1fr;
  }
  .proj-hero__body--case .proj-hero__title,
  .proj-hero__body--case .proj-hero__aside {
    grid-column: 1;
  }
}

.proj-hero__cover {
  border-top: none;
  padding-top: 200px; /* description to cover image, same rhythm on every case page */
}

.proj-hero__cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
  .proj-hero__body {
    grid-template-columns: 1fr;
  }

  .proj-hero__title,
  .proj-hero__left,
  .proj-hero__right {
    grid-column: 1;
    grid-row: auto;
  }
}

/* --- Cover image --- */
.proj-cover {
  padding-bottom: var(--space-16);
}

.proj-cover__img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Body content --- */
.proj-body {
  padding-bottom: var(--space-3);
}

/* Text block (label + paragraphs) */
.proj-text-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: 64px;
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.proj-text-block > .label {
  display: none;
}

.proj-text-block__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.proj-text-block__content p {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.5;
}

/* Image pair (two side by side) */
.proj-image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.proj-image-pair + .proj-image-pair {
  margin-top: var(--space-3);
}

.proj-image-pair__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.proj-image-pair__item img,
.proj-image-pair__item video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* Full-width image */
.proj-full-image {
  padding-block: var(--space-8);
}

.proj-full-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* Image trio (1 tall + 2 stacked) */
.proj-image-trio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.proj-image-trio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

.proj-image-trio__item--tall {
  grid-row: 1 / 3;
}

/* Quote / testimonial */
.proj-quote {
  padding-block: var(--space-16);
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}

.proj-quote p {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-style: italic;
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-8);
}

.proj-quote cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.proj-quote__author {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.proj-quote__role {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
}

/* Video stack (vertical, full-width) */
.proj-video-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-block: var(--space-16);
}

.proj-video-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.proj-video-card__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.proj-video-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: filter var(--duration-base) var(--ease-out);
}

.proj-video-card__link:hover .proj-video-card__thumb {
  filter: brightness(0.7);
}

.proj-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 24px;
  color: var(--color-black);
  padding-left: 4px;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.proj-video-card__link:hover .proj-video-card__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--color-white);
}

.proj-video-card__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.proj-video-card__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  flex-shrink: 0;
}

.proj-video-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  text-align: right;
}

/* --- Next project --- */
.proj-next {
  padding-block: var(--space-16);
}

.proj-next__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--space-12);
}

.proj-next__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.proj-next__number {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wider);
}

.proj-next__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.proj-next__inner:hover .proj-next__title {
  text-decoration: underline;
}

.proj-next__arrow {
  display: none;
}

/* --- Start a project CTA --- */
.proj-cta {
  padding-top: var(--space-16);
  padding-bottom: 0; /* gap to the footer now comes from .footer's own padding-top */
  border-top: var(--border-hairline);
}

.proj-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.proj-cta__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.proj-cta__link:hover {
  text-decoration: underline;
}

.proj-cta__link svg {
  display: none;
}

/* --- Format strip (horizontal row of different format examples) --- */
.proj-format-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.proj-format-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.proj-format-strip__item .placeholder {
  aspect-ratio: 1 / 1;
}

.proj-format-strip__item--poster .placeholder {
  aspect-ratio: 3 / 4;
}

.proj-format-strip__item--social .placeholder {
  aspect-ratio: 1 / 1;
}

.proj-format-strip__item--video .placeholder {
  aspect-ratio: 16 / 9;
}

/* --- Full-bleed image (no container padding) --- */
.proj-full-bleed {
  padding-block: var(--space-8);
  margin-inline: calc(var(--page-margin) * -1);
}

.proj-full-bleed .placeholder {
  aspect-ratio: 21 / 9;
}

.proj-full-bleed img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* --- Single large image (within container, tall) --- */
.proj-single-image {
  padding-block: var(--space-8);
}

.proj-single-image .placeholder {
  aspect-ratio: 3 / 4;
}

/* --- Image grid (asymmetric, 2 images different sizes) --- */
.proj-image-asymmetric {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.proj-image-asymmetric .placeholder {
  aspect-ratio: 4 / 5;
}

/* --- Instagram slider --- */
.proj-slider {
  margin-bottom: 48px;
}

.proj-slider--arrows {
  position: relative;
}

.proj-slider__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.proj-slider__track::-webkit-scrollbar {
  display: none;
}

.proj-slider__track img {
  flex-shrink: 0;
  width: 320px;
  height: 320px;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
  border-radius: var(--radius-lg);
}

@media (min-width: 901px) {
  .proj-slider__track img {
    width: 400px;
    height: 400px;
  }
}

/* --- Slider arrows --- */
.proj-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 50%;
  font-size: 20px;
  color: var(--color-text, #000);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
  opacity: 0.9;
}

.proj-slider__arrow:hover {
  background: var(--color-text, #000);
  color: var(--color-white, #fff);
  border-color: var(--color-text, #000);
}

.proj-slider__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.proj-slider__arrow--prev {
  left: -24px;
}

.proj-slider__arrow--next {
  right: -24px;
}

/* --- Horizontal scroll gallery (ew.studio style) --- */
/* --- Instagram showcase (phone + slides on grey bg) --- */
.proj-insta-showcase {
  background: var(--color-gray-100);
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 80px;
}

.proj-insta-showcase__inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-inline: var(--page-margin);
  max-width: 1200px;
}

/* Phone mockup */
.proj-insta-phone {
  flex-shrink: 0;
  width: 280px;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.proj-insta-phone__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.proj-insta-phone__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-gray-100);
}

.proj-insta-phone__username {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.proj-insta-phone__image img {
  width: 100%;
  height: auto;
  display: block;
}

.proj-insta-phone__actions {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  color: var(--color-text);
}

.proj-insta-phone__actions svg {
  width: 22px;
  height: 22px;
}

/* Slide cards next to phone */
.proj-insta-slides {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow: hidden;
}

.proj-insta-slides__item {
  flex-shrink: 0;
  width: 200px;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.proj-insta-slides__item img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .proj-insta-showcase__inner {
    flex-direction: column;
    align-items: center;
  }

  .proj-insta-phone {
    width: 260px;
  }

  .proj-insta-slides {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 16px;
  }

  .proj-insta-slides__item {
    width: 160px;
  }
}

@media (max-width: 600px) {
  .proj-insta-phone {
    width: 240px;
  }

  .proj-insta-slides__item {
    width: 140px;
  }
}

/* --- Horizontal scroll gallery (loop) --- */
.proj-hscroll {
  margin-inline: var(--page-margin);
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-bg-alt);
}

.proj-hscroll__track {
  display: flex;
  gap: 64px;
  will-change: transform;
}

.proj-hscroll__slide {
  flex-shrink: 0;
  width: 28vw;
}

.proj-hscroll__slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
  .proj-hscroll__slide {
    width: 45vw;
  }
}

@media (max-width: 600px) {
  .proj-hscroll__slide {
    width: 65vw;
  }
}

/* Uniform drag slider (Magic clay, Dovidka info, ...) — sits within the
   grid (16px side margins), not full-bleed. Every slide shares one height
   (derived from the page's full-width image ratio, ~1.46), so the track
   never jumps between slides, and each image keeps its own natural width
   at that height — nothing cropped or stretched. */
.proj-hscroll--uniform {
  margin-inline: var(--page-margin); /* sits in the grid, not full-bleed */
  min-height: 0;
  background: transparent;
  --hscroll-slide-h: calc((100vw - 2 * var(--page-margin)) / 1.46 * 0.85); /* 15% smaller */
}

.proj-hscroll--uniform .proj-hscroll__track {
  gap: var(--space-3);
}

.proj-hscroll--uniform .proj-hscroll__slide {
  height: var(--hscroll-slide-h); /* same height as the other content */
  width: auto;                    /* width follows each image's own proportions */
}

.proj-hscroll--uniform .proj-hscroll__slide img,
.proj-hscroll--uniform .proj-hscroll__slide video {
  height: 100%; /* every slide is exactly the same height */
  width: auto;  /* natural width — proportions kept, no letterboxing */
  display: block;
  border-radius: 0;
}

/* Drag-to-scroll: hide the native cursor, show a "Drag" label instead */
.proj-hscroll--drag {
  cursor: none;
}

.proj-hscroll--drag .proj-hscroll__slide,
.proj-hscroll--drag .proj-hscroll__slide img,
.proj-hscroll--drag .proj-hscroll__slide video {
  cursor: none;
}

.hscroll-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
  mix-blend-mode: difference; /* stays legible over any image, like the header */
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  font-style: normal;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              font-style var(--duration-fast) var(--ease-out);
}

.hscroll-cursor.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hscroll-cursor.is-dragging {
  transform: translate(-50%, -50%) scale(0.9);
  font-style: italic;
}

/* --- Story cards marquee on orange (Ba food §33) --- */
.proj-hscroll--stories {
  margin-inline: var(--page-margin);
  min-height: 0;
  padding-block: 96px;
  border-radius: var(--radius-lg);
  background-color: #d9651e;
  background-image: url('../projects/bafood/33-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.proj-hscroll--stories .proj-hscroll__track {
  gap: 32px;
  align-items: center;
}

.proj-hscroll--stories .proj-hscroll__slide {
  width: 18vw;
}

.proj-hscroll--stories .proj-hscroll__slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

@media (max-width: 900px) {
  .proj-hscroll--stories .proj-hscroll__slide { width: 32vw; }
  .proj-hscroll--stories { padding-block: 72px; }
}

@media (max-width: 600px) {
  .proj-hscroll--stories .proj-hscroll__slide { width: 52vw; }
  .proj-hscroll--stories { padding-block: 56px; }
}

/* --- Instagram post header (on hscroll slides) --- */
.proj-insta-post {
  background: var(--color-white);
  border: 0.5px solid var(--color-border);
}

.proj-insta-post__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.proj-insta-post__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gray-200), var(--color-gray-300));
  flex-shrink: 0;
}

.proj-insta-post__name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  flex: 1;
}

.proj-insta-post__dots {
  flex-shrink: 0;
  fill: var(--color-gray-500);
}

.proj-insta-post img {
  border-radius: 0;
}

/* --- Video grid (2-col with captions) --- */
.proj-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.proj-video-item__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.proj-video-item__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.proj-video-item__thumb {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-base) var(--ease-out),
              filter var(--duration-fast) var(--ease-out);
}

.proj-video-item__link:hover .proj-video-item__thumb {
  transform: scale(1.03);
  filter: brightness(0.85);
}

.proj-video-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  font-size: 22px;
  color: var(--color-black);
  padding-left: 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.proj-video-item__link:hover .proj-video-item__play {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.proj-video-item__caption {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

@media (max-width: 600px) {
  .proj-video-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Animation frame cards --- */
.proj-anim-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-block: var(--space-8);
}

.proj-anim-card {
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.proj-anim-card__frames {
  position: relative;
  width: 52%;
  aspect-ratio: 1 / 1;
}

.proj-anim-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: anim-cycle 0.64s steps(1) infinite;
}

.proj-anim-card__frame:nth-child(1) { animation-delay: 0s; }
.proj-anim-card__frame:nth-child(2) { animation-delay: 0.16s; }
.proj-anim-card__frame:nth-child(3) { animation-delay: 0.32s; }
.proj-anim-card__frame:nth-child(4) { animation-delay: 0.48s; }

@keyframes anim-cycle {
  0%     { opacity: 1; }
  25%    { opacity: 0; }
  100%   { opacity: 0; }
}

@media (max-width: 600px) {
  .proj-anim-grid {
    grid-template-columns: 1fr;
  }

  .proj-anim-card__frames {
    width: 50%;
  }
}

/* --- Sticker cards --- */
.proj-sticker-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-block: var(--space-8);
}

.proj-sticker-card {
  background: var(--color-gray-100);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}

.proj-sticker-card img {
  width: 45%;
  display: block;
  transition: width 0.6s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}

/* Hover-fill variant: on hover, the sticker grows to fill its whole card */
.proj-sticker-card--fill {
  overflow: hidden;
  cursor: pointer;
}

.proj-sticker-card--fill:hover img,
.proj-sticker-card--fill:focus-within img {
  width: 100%;
}

@media (max-width: 600px) {
  .proj-sticker-cards {
    grid-template-columns: 1fr;
  }

  .proj-sticker-card {
    padding: 32px;
  }

  .proj-sticker-card img {
    width: 50%;
  }
}

/* --- Sticker scatter composition (editorial collage, layered depth) --- */
.proj-sticker-scatter {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.04), transparent 55%),
    var(--color-gray-100);
  border-radius: var(--radius-lg);
  margin-top: 16px;
  overflow: hidden;
  isolation: isolate;
}

.proj-sticker-scatter__item {
  position: absolute;
  display: block;
  height: auto;
  transform-origin: center;
  will-change: transform;
  user-select: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  transition: filter 0.6s var(--ease-out, cubic-bezier(.2,.7,.2,1));
  animation: scatterFloat 9s ease-in-out infinite;
}

/* === Circular orbit variant === */
@property --orbit {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.proj-sticker-scatter--orbit {
  aspect-ratio: 1 / 1;
}

.proj-sticker-scatter--orbit .proj-sticker-scatter__item[style] {
  top: 50%;
  left: 50%;
  width: 20%;
  max-width: 260px;
  opacity: 1;
  z-index: auto;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--orbit) + var(--start, 0deg)))
    translateY(-34%)
    rotate(calc(-1 * (var(--orbit) + var(--start, 0deg))));
  animation: sticker-orbit 28s linear infinite;
  animation-delay: 0s;
}

@keyframes sticker-orbit {
  from { --orbit: 0deg; }
  to   { --orbit: 360deg; }
}

@media (max-width: 700px) {
  .proj-sticker-scatter--orbit .proj-sticker-scatter__item {
    width: 34%;
  }
}

.proj-sticker-scatter__item:hover {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.18))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.10));
  z-index: 20;
}

@keyframes scatterFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* ===== CORE — dense overlap at the heart ===== */
.proj-sticker-scatter__item--1 { /* anchor, Kharkiv */
  top: 26%; left: 38%; width: 24%;
  transform: rotate(4deg);
  z-index: 10;
  animation-delay: -0.9s;
}
.proj-sticker-scatter__item--1:hover { transform: rotate(0deg) translateY(-8px) scale(1.05); }

.proj-sticker-scatter__item--2 { /* upper-left support */
  top: 12%; left: 28%; width: 19%;
  transform: rotate(-12deg);
  z-index: 8;
  animation-delay: -0.4s;
}
.proj-sticker-scatter__item--2:hover { transform: rotate(-6deg) translateY(-6px) scale(1.04); }

.proj-sticker-scatter__item--3 { /* upper-right support */
  top: 14%; left: 54%; width: 19%;
  transform: rotate(10deg);
  z-index: 8;
  animation-delay: -3.2s;
}
.proj-sticker-scatter__item--3:hover { transform: rotate(4deg) translateY(-6px) scale(1.04); }

.proj-sticker-scatter__item--4 { /* lower-left support */
  top: 52%; left: 29%; width: 17%;
  transform: rotate(-16deg);
  z-index: 7;
  animation-delay: -2.4s;
}
.proj-sticker-scatter__item--4:hover { transform: rotate(-10deg) translateY(-6px) scale(1.04); }

.proj-sticker-scatter__item--5 { /* lower-right support */
  top: 54%; left: 54%; width: 16%;
  transform: rotate(14deg);
  z-index: 7;
  animation-delay: -5.0s;
}
.proj-sticker-scatter__item--5:hover { transform: rotate(8deg) translateY(-6px) scale(1.04); }

.proj-sticker-scatter__item--6 { /* bottom-center peek, sits above anchor bottom */
  top: 62%; left: 42%; width: 15%;
  transform: rotate(-4deg);
  z-index: 9;
  animation-delay: -6.3s;
}
.proj-sticker-scatter__item--6:hover { transform: rotate(0deg) translateY(-6px) scale(1.04); }

/* ===== SECONDARY RING — breathing around core ===== */
.proj-sticker-scatter__item--7 { /* upper-far-left */
  top: 4%; left: 8%; width: 14%;
  transform: rotate(-20deg);
  z-index: 5;
  animation-delay: -1.1s;
}
.proj-sticker-scatter__item--7:hover { transform: rotate(-14deg) translateY(-6px) scale(1.04); }

.proj-sticker-scatter__item--8 { /* upper-far-right */
  top: 5%; left: 78%; width: 14%;
  transform: rotate(18deg);
  z-index: 5;
  animation-delay: -1.8s;
}
.proj-sticker-scatter__item--8:hover { transform: rotate(12deg) translateY(-6px) scale(1.04); }

.proj-sticker-scatter__item--9 { /* lower-far-left */
  top: 70%; left: 10%; width: 14%;
  transform: rotate(22deg);
  z-index: 5;
  animation-delay: -3.7s;
}
.proj-sticker-scatter__item--9:hover { transform: rotate(14deg) translateY(-6px) scale(1.04); }

.proj-sticker-scatter__item--10 { /* lower-far-right */
  top: 70%; left: 76%; width: 15%;
  transform: rotate(-18deg);
  z-index: 5;
  animation-delay: -5.5s;
}
.proj-sticker-scatter__item--10:hover { transform: rotate(-12deg) translateY(-6px) scale(1.04); }

.proj-sticker-scatter__item--11 { /* mid-far-left */
  top: 36%; left: 6%; width: 13%;
  transform: rotate(-8deg);
  z-index: 6;
  animation-delay: -4.4s;
}
.proj-sticker-scatter__item--11:hover { transform: rotate(-2deg) translateY(-6px) scale(1.04); }

/* ===== TERTIARY — small accents ===== */
.proj-sticker-scatter__item--12 { /* top accent */
  top: 2%; left: 46%; width: 9%;
  transform: rotate(-6deg);
  z-index: 4;
  opacity: 0.9;
  animation-delay: -6.8s;
}
.proj-sticker-scatter__item--12:hover { transform: rotate(0deg) translateY(-4px) scale(1.05); }

.proj-sticker-scatter__item--13 { /* mid-right accent */
  top: 44%; left: 84%; width: 11%;
  transform: rotate(16deg);
  z-index: 6;
  animation-delay: -7.4s;
}
.proj-sticker-scatter__item--13:hover { transform: rotate(10deg) translateY(-4px) scale(1.05); }

.proj-sticker-scatter__item--14 { /* bottom-center accent */
  top: 84%; left: 36%; width: 10%;
  transform: rotate(-22deg);
  z-index: 4;
  opacity: 0.92;
  animation-delay: -0.2s;
}
.proj-sticker-scatter__item--14:hover { transform: rotate(-14deg) translateY(-4px) scale(1.05); }

/* ===== EDGE BLEEDS — partially cropped, softened ===== */
.proj-sticker-scatter__item--15 { /* top edge */
  top: -5%; left: 66%; width: 8%;
  transform: rotate(14deg);
  z-index: 3;
  opacity: 0.78;
  animation-delay: -8.1s;
}
.proj-sticker-scatter__item--15:hover { transform: rotate(8deg) translateY(-4px) scale(1.05); opacity: 1; }

.proj-sticker-scatter__item--16 { /* left edge */
  top: 62%; left: -4%; width: 9%;
  transform: rotate(24deg);
  z-index: 3;
  opacity: 0.78;
  animation-delay: -4.9s;
}
.proj-sticker-scatter__item--16:hover { transform: rotate(16deg) translateY(-4px) scale(1.05); opacity: 1; }

.proj-sticker-scatter__item--17 { /* right edge */
  top: 20%; left: 91%; width: 9%;
  transform: rotate(-24deg);
  z-index: 3;
  opacity: 0.78;
  animation-delay: -2.1s;
}
.proj-sticker-scatter__item--17:hover { transform: rotate(-16deg) translateY(-4px) scale(1.05); opacity: 1; }

.proj-sticker-scatter__item--18 { /* bottom-right edge */
  top: 88%; left: 62%; width: 8%;
  transform: rotate(10deg);
  z-index: 3;
  opacity: 0.8;
  animation-delay: -7.8s;
}
.proj-sticker-scatter__item--18:hover { transform: rotate(4deg) translateY(-4px) scale(1.05); opacity: 1; }

@media (max-width: 900px) {
  .proj-sticker-scatter { aspect-ratio: 4 / 5; }

  /* Core */
  .proj-sticker-scatter__item--1  { top: 32%; left: 28%; width: 44%; }
  .proj-sticker-scatter__item--2  { top: 14%; left: 6%;  width: 36%; }
  .proj-sticker-scatter__item--3  { top: 14%; left: 58%; width: 34%; }
  .proj-sticker-scatter__item--4  { top: 54%; left: 8%;  width: 32%; }
  .proj-sticker-scatter__item--5  { top: 56%; left: 58%; width: 30%; }
  .proj-sticker-scatter__item--6  { top: 70%; left: 34%; width: 28%; }

  /* Secondary */
  .proj-sticker-scatter__item--7  { top: 2%;  left: 38%; width: 22%; }
  .proj-sticker-scatter__item--8  { top: 4%;  left: 78%; width: 20%; }
  .proj-sticker-scatter__item--9  { top: 86%; left: 6%;  width: 22%; }
  .proj-sticker-scatter__item--10 { top: 84%; left: 72%; width: 22%; }
  .proj-sticker-scatter__item--11 { display: none; }

  /* Tertiary */
  .proj-sticker-scatter__item--12 { top: 2%;  left: 14%; width: 16%; }
  .proj-sticker-scatter__item--13 { top: 40%; left: 84%; width: 14%; }
  .proj-sticker-scatter__item--14 { top: 92%; left: 38%; width: 16%; }

  /* Hide the most delicate bleeds on mobile so density stays clean */
  .proj-sticker-scatter__item--15 { display: none; }
  .proj-sticker-scatter__item--16 { display: none; }
  .proj-sticker-scatter__item--17 { display: none; }
  .proj-sticker-scatter__item--18 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .proj-sticker-scatter__item { animation: none; }
}

/* --- Split pair: illustration + grey placeholder panel --- */
.proj-split-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  margin-block: var(--space-12);
  overflow: hidden;
}

.proj-split-pair__illus,
.proj-split-pair__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 96px);
  background: var(--color-gray-100);
}

.proj-split-pair__illus img {
  width: min(72%, 440px);
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .proj-split-pair {
    grid-template-columns: 1fr;
    min-height: 100vh;
  }
  .proj-split-pair__illus img { width: min(62%, 280px); }
  .proj-split-pair__panel { min-height: 50vh; }
}

/* --- Mosaic illustration grid --- */
.proj-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}

.proj-mosaic__item {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.proj-mosaic__item--4  { grid-column: span 4; }
.proj-mosaic__item--6  { grid-column: span 6; }
.proj-mosaic__item--8  { grid-column: span 8; }
.proj-mosaic__item--12 { grid-column: span 12; }

.proj-mosaic__item img,
.proj-mosaic__item video {
  width: 100%;
  display: block;
}

@media (max-width: 900px) {
  .proj-mosaic__item--4 { grid-column: span 6; }
  .proj-mosaic__item--8 { grid-column: span 6; }
}

@media (max-width: 600px) {
  .proj-mosaic__item--4,
  .proj-mosaic__item--6,
  .proj-mosaic__item--8,
  .proj-mosaic__item--12 {
    grid-column: span 12;
  }
  .proj-mosaic__item--12 {
    max-height: none;
  }
}

/* --- Click-through image swap --- */
.proj-imgswap {
  position: relative;
  cursor: none;
}

.proj-imgswap__layer {
  display: block;
  width: 100%;
  height: auto;
}

.proj-imgswap__layer--top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}

.proj-imgswap__layer--top.is-active {
  opacity: 1;
}

.proj-imgswap__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  mix-blend-mode: difference;
  z-index: 2;
  transition: opacity 200ms var(--ease-out);
}

.proj-imgswap__cursor.is-visible {
  opacity: 1;
}

.proj-imgswap__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Auto-cycling image (GIF-like) --- */
.proj-imgcycle {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.proj-imgcycle__sizer {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
}

/* Hard-cut frame swap, not a cross-fade: compositing two overlapping
   semi-transparent layers mid-fade never fully occludes what's behind them,
   so the page background shows through as a white flash at the midpoint of
   every transition — inherent to the math, not fixable by tuning easing/
   duration. Toggling opacity 0/1 with no transition means exactly one layer
   is ever partially visible, which also reads as the intended flipbook/
   sprite-style animation rather than a dissolve. */
.proj-imgcycle__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: none;
}

.proj-imgcycle__layer.is-active {
  opacity: 1;
  z-index: 1;
}

/* --- Compact illustration grid (Pentagram-style) --- */
.proj-grid-compact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding-block: var(--space-8);
}

.proj-grid-compact__item {
  grid-column: span 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.proj-grid-compact__item--wide {
  grid-column: span 8;
}

.proj-grid-compact__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .proj-grid-compact__item {
    grid-column: span 6;
  }
  .proj-grid-compact__item--wide {
    grid-column: span 12;
  }
}

@media (max-width: 600px) {
  .proj-grid-compact__item,
  .proj-grid-compact__item--wide {
    grid-column: span 12;
  }
}

/* --- Instagram carousel blocks (Swiss style) --- */
.proj-carousel-set {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: var(--space-8);
}

.proj-carousel-block__header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.proj-carousel-block__number {
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.proj-carousel-block__meta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.proj-carousel-block__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.proj-carousel-block__grid img {
  width: 100%;
  display: block;
}

.proj-carousel-block__grid--6col {
  grid-template-columns: repeat(6, 1fr);
}

.proj-carousel-block__grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .proj-carousel-block__grid--6col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .proj-carousel-block__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .proj-carousel-block__grid--2col {
    grid-template-columns: 1fr;
  }

  .proj-carousel-block__number {
    font-size: 36px;
  }
}

/* --- Other projects --- */
.proj-other {
  padding-top: var(--space-12);
  padding-bottom: 0; /* gap to the footer now comes from .footer's own padding-top */
}

.proj-other__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4); /* 16px to the grid of cases */
  padding-top: var(--space-24);
  border-top: none;
}

.proj-other__heading {
  font-family: var(--font-body);
  font-size: 14px; /* same as the header / main-page text */
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--tracking-wide);
}

.proj-other__nav {
  display: flex;
  gap: 4px;
}

.proj-other__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 14px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.proj-other__arrow:hover {
  opacity: 0.5;
}

.proj-other__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-3);
}

.proj-other__grid .ed-case {
  grid-column: span 1;
}

.proj-other__grid .ed-case__info {
  margin-top: 12px;
  display: block;
}

.proj-other__grid .ed-case__title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 0;
}

.proj-other__grid .ed-case__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .proj-meta__grid {
    grid-template-columns: 1fr;
  }
  .proj-meta__grid > :first-child,
  .proj-meta__grid > :last-child {
    grid-column: 1 / -1;
  }

  .proj-text-block {
    grid-template-columns: 1fr;
  }
  .proj-text-block > .label,
  .proj-text-block > .proj-text-block__content {
    grid-column: 1 / -1;
  }

  .proj-image-trio {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .proj-image-trio__item--tall {
    grid-row: auto;
  }

  .proj-next__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .proj-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }
}

@media (max-width: 600px) {
  .proj-hero {
    padding-top: calc(var(--header-height-mobile) + var(--space-12));
  }

  .proj-image-pair {
    grid-template-columns: 1fr;
  }

  .proj-format-strip {
    grid-template-columns: 1fr;
  }

  .proj-image-asymmetric {
    grid-template-columns: 1fr;
  }

  .proj-other__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SHOWCASE GRID — Portfolio illustration cards
   ============================================ */

/* Alternating section background */
.proj-body--alt {
  background: var(--color-gray-50);
}

/* Section number inside label */
.label__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-gray-400);
  margin-right: var(--space-2);
  letter-spacing: var(--tracking-wide);
}

/* Grid container */
.proj-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.proj-showcase--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* Each card: visual area + label */
.proj-showcase__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Visual container — light bg, square, illustration centered */
.proj-showcase__visual {
  background: var(--color-gray-100);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16%;
  overflow: hidden;
  transition: background var(--duration-base) var(--ease-out);
}

.proj-body--alt .proj-showcase__visual {
  background: var(--color-white);
}

.proj-showcase__card:hover .proj-showcase__visual {
  background: var(--color-gray-200);
}

.proj-body--alt .proj-showcase__card:hover .proj-showcase__visual {
  background: var(--color-gray-100);
}

.proj-showcase__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s var(--ease-out);
}

.proj-showcase__card:hover .proj-showcase__visual img {
  transform: scale(1.06);
}

/* Label underneath */
.proj-showcase__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-500);
  text-align: center;
}

/* --- Showcase responsive --- */
@media (max-width: 900px) {
  .proj-showcase {
    grid-template-columns: repeat(3, 1fr);
  }
  .proj-showcase--4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .proj-showcase {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .proj-showcase--4col {
    grid-template-columns: repeat(2, 1fr);
  }
  .proj-showcase__visual {
    padding: 12%;
  }
}