/* Selected work index — hero matches studio hub scale */

.section--case-studies-hero {
  min-height: 80vh;
  min-height: 80svh;
  justify-content: center;
}

.section--case-studies-hero .hero-layout {
  margin-inline: auto;
  text-align: center;
}

.section--case-studies-hero .section-title,
.section--case-studies-hero .section-lead {
  margin-inline: auto;
}

.section--case-studies-hero .section-title {
  max-width: 18ch;
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
}

.section--case-studies-hero .section-lead {
  max-width: 46ch;
  margin-top: clamp(var(--space-7-0), 3vw, var(--space-11-0));
  font-size: clamp(var(--text-lg), 1.7vw, 1.6rem);
  line-height: var(--leading-base);
}

.section--case-studies-hero .case-studies-hero-cta {
  margin-top: clamp(var(--space-7), 5vw, var(--space-9));
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .section--case-studies-hero {
    min-height: 50vh;
    min-height: 50svh;
  }

  .section--case-studies-hero .hero-layout {
    margin-inline: 0;
    text-align: left;
  }

  .section--case-studies-hero .section-title,
  .section--case-studies-hero .section-lead {
    margin-inline: 0;
  }

  .section--case-studies-hero .section-title {
    max-width: 22ch;
    font-size: clamp(var(--text-3xl), 3.5vw, var(--text-4xl));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-hero);
  }

  .section--case-studies-hero .section-lead {
    max-width: 48ch;
    margin-top: var(--space-5);
    font-size: clamp(var(--text-base), 1.1vw, var(--text-lg));
    line-height: var(--leading-base);
  }

  .section--case-studies-hero .case-studies-hero-cta {
    margin-top: var(--space-7);
    margin-inline: 0;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .section--case-studies-hero .section-title {
    max-width: 16ch;
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-hero);
  }

  .section--case-studies-hero .section-lead {
    max-width: 32ch;
    margin-top: clamp(var(--space-6), 2.75vw, var(--space-7));
    font-size: clamp(var(--text-xl), 2vw, 1.6rem);
    line-height: var(--leading-base);
  }
}

@media (max-width: 760px) {
  .section--case-studies-hero .section-title {
    font-size: clamp(var(--text-3xl), 5vw, 4.75rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
  }
}

.case-studies-index-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(var(--space-10), 8vw, var(--space-12));
}

.case-studies-index-status {
  color: var(--text-secondary);
}

/* One-column case cards — start sm, enlarge to md-lg on scroll */
.section-shell.section--showcase[data-case-studies-index] {
  /* view() timelines break when an ancestor clips; section-shell defaults to hidden */
  overflow: visible;

  --case-study-card-expand-from: var(--container-sm);
  --case-study-card-expand-to: var(--container-md-lg);
  --case-studies-caption-padding-x: 0;
  --case-studies-caption-column-inset: clamp(var(--space-3), 2vw, var(--space-5));
  --case-studies-cards-cta-gap-boost: var(--space-9);
  --case-study-card-desc-max-ch: 42ch;

  padding-bottom: calc(var(--section-archetype-padding-y) + var(--case-studies-cards-cta-gap-boost));
}

.case-studies-index-grid.work-index {
  grid-template-columns: minmax(0, 1fr);
}

.case-studies-index-grid .work-card--editorial,
.case-studies-index-grid .work-card--editorial.work-card--placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);

  width: 100%;
  max-width: var(--container-sm);
  margin-inline: auto;
  aspect-ratio: auto;

  overflow: visible;
  border-radius: 0;
  background: transparent;
  outline: none;
}

.case-studies-index-grid .work-card--editorial:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
}

.case-studies-index-grid .work-card--editorial .work-card-media {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--obsidian-deep);
}

.case-studies-index-grid .work-card--editorial.work-card--native-media .work-card-media {
  aspect-ratio: 16 / 10;
}

.case-studies-index-grid .work-card--editorial .work-card-image,
.case-studies-index-grid .work-card--editorial .work-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-studies-index-grid .work-card--editorial:focus-visible .work-card-image,
.case-studies-index-grid .work-card--editorial:focus-visible .work-card-video {
  transform: scale(1.04);
  opacity: 1;
}

.case-studies-index-grid .work-card--editorial:focus-visible .work-card-image--mark,
.case-studies-index-grid .work-card--editorial:focus-visible .work-card-video.work-card-image--mark,
.case-studies-index-grid .work-card--editorial:focus-visible .work-card-image--native,
.case-studies-index-grid .work-card--editorial:focus-visible .work-card-video.work-card-image--native {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .case-studies-index-grid .work-card--editorial:hover .work-card-image,
  .case-studies-index-grid .work-card--editorial:hover .work-card-video {
    transform: scale(1.04);
    opacity: 1;
  }

  .case-studies-index-grid .work-card--editorial:hover .work-card-image--mark,
  .case-studies-index-grid .work-card--editorial:hover .work-card-video.work-card-image--mark,
  .case-studies-index-grid .work-card--editorial:hover .work-card-image--native,
  .case-studies-index-grid .work-card--editorial:hover .work-card-video.work-card-image--native {
    transform: none;
  }
}

.case-studies-index-grid .work-card--editorial .work-card-arrow {
  --case-study-card-arrow-inset: clamp(var(--space-3), 3vw, var(--space-5));

  position: absolute;
  z-index: 1;
  top: var(--case-study-card-arrow-inset);
  right: var(--case-study-card-arrow-inset);

  font-size: clamp(3rem, 3vw, 3.75rem);
  line-height: var(--leading-heading);
  color: var(--text-inverse-strong);

  opacity: 0;
  pointer-events: none;

  transform: translateY(var(--case-study-card-arrow-inset));

  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

.case-studies-index-grid .work-card--editorial:focus-visible .work-card-arrow {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .case-studies-index-grid .work-card--editorial:hover .work-card-arrow {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Caption under image: title | desc ··· meta (desktop / tablet) */
.case-studies-index-grid .work-card--editorial .work-card-caption {
  padding-inline: 0;
}

.case-studies-index-grid .work-card--editorial .work-card-meta__part {
  display: inline;
  opacity: var(--opacity-interactive-muted);
}

.case-studies-index-grid .work-card--editorial .work-card-meta__part + .work-card-meta__part::before {
  content: " | ";
  opacity: var(--opacity-interactive-subtle);
}

@media (min-width: 761px) {
  .case-studies-index-grid .work-card--editorial .work-card-caption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--case-studies-caption-column-inset, clamp(var(--space-3), 2vw, var(--space-5)));
    align-items: start;
  }

  .case-studies-index-grid .work-card--editorial .work-card-title {
    grid-column: 1;
    grid-row: 1;
    position: static;
    margin: 0;
    font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
    line-height: var(--leading-heading);
    text-align: left;
  }

  .case-studies-index-grid .work-card--editorial .work-card-desc {
    grid-column: 2;
    grid-row: 1;
    position: static;
    min-width: 0;
    max-width: 48ch;
    margin: 0;
    padding-left: var(--case-studies-caption-column-inset, clamp(var(--space-3), 2vw, var(--space-5)));
    border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent);

    font-size: var(--text-base);
    line-height: var(--leading-base);
    letter-spacing: var(--tracking-body);
    text-align: left;
    text-wrap: pretty;

    opacity: 0.78;
  }

  .case-studies-index-grid .work-card--editorial .work-card-meta {
    grid-column: 3;
    grid-row: 1;
    position: static;
    margin: 0;
    max-width: none;
    align-self: start;
    justify-self: end;
    text-align: right;
  }
}

@media (max-width: 760px) {
  .case-studies-index-grid {
    gap: clamp(var(--space-8), 8vw, var(--space-10));
  }

  .case-studies-index-grid .work-card--editorial,
  .case-studies-index-grid .work-card--editorial.work-card--placeholder {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    max-width: 100%;
  }

  .case-studies-index-grid .work-card--editorial .work-card-media {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 16 / 12;
  }

  .case-studies-index-grid .work-card--editorial .work-card-caption {
    display: contents;
  }

  .case-studies-index-grid .work-card--editorial .work-card-title {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
    line-height: var(--leading-heading);
  }

  .case-studies-index-grid .work-card--editorial .work-card-meta {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    justify-self: start;
    text-align: left;
    line-height: var(--leading-snug);
  }

  .case-studies-index-grid .work-card--editorial .work-card-meta__part {
    display: inline;
  }

  .case-studies-index-grid .work-card--editorial .work-card-meta__part--label {
    display: none;
  }

  .case-studies-index-grid .work-card--editorial .work-card-desc {
    grid-column: 2;
    grid-row: 2 / 4;
    max-width: var(--case-study-card-desc-max-ch, 42ch);
    padding-left: 0;
    font-size: var(--text-sm);
    align-self: start;
    opacity: var(--opacity-interactive-subtle);
  }
}

/* Tablet: 761–1024 (iPad mini/Air/Pro portrait incl. 12.9") */
@media (min-width: 761px) and (max-width: 1024px) {
  .case-studies-index-grid {
    gap: clamp(var(--space-8), 6vw, var(--space-10));
  }

  .section-shell.section--showcase[data-case-studies-index] {
    --case-studies-caption-column-inset: var(--space-3);
    --case-studies-cards-cta-gap-boost: var(--space-7);
  }

  .case-studies-index-grid .work-card--editorial,
  .case-studies-index-grid .work-card--editorial.work-card--placeholder {
    max-width: 100%;
    animation: none;
  }

  .case-studies-index-grid .work-card--editorial,
  .case-studies-index-grid .work-card--editorial.work-card--placeholder {
    gap: var(--space-5);
  }
}

/* iPad Pro / larger tablet editorial split (821–1024) */
@media (min-width: 821px) and (max-width: 1024px) {
  .case-studies-index-grid .work-card--editorial .work-card-title {
    font-size: clamp(var(--text-lg), 2.2vw, var(--text-xl));
  }
}

@keyframes case-study-card-expand {
  from { max-width: var(--case-study-card-expand-from); }
  to   { max-width: var(--case-study-card-expand-to); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
    .case-studies-index-grid .work-card--editorial,
    .case-studies-index-grid .work-card--editorial.work-card--placeholder {
      max-width: var(--case-study-card-expand-from);
      animation: case-study-card-expand linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}


.work-card--placeholder {
  pointer-events: none;
  cursor: default;
}

.work-card-image--mark {
  object-fit: contain;
  padding: clamp(var(--space-6), 12%, var(--space-8));
  transform: none;
}

.work-card--placeholder .work-card-image {
  opacity: 0.92;
}


.work-card--placeholder {