/* Luminous case studies — extensions to the landing-page design system. */

.case-site {
  background:
    radial-gradient(70% 34% at 84% 4%, rgba(36, 198, 132, .1), transparent 68%),
    var(--paper);
}

.case-site .nav__links a[aria-current="page"] {
  color: var(--ink);
}

.case-site .nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.case-shell {
  width: min(100% - (var(--gutter) * 2), 1180px);
  margin-inline: auto;
}

.case-eyebrow,
.case-crumb,
.case-label,
.case-card__type,
.case-card__result,
.case-proof-note,
.case-next__label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.case-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
  transition: color var(--dur-out) var(--ease-hover);
}

.case-crumb::before {
  content: "←";
  transition: transform var(--dur-out) var(--ease-hover);
}

@media (hover: hover) {
  .case-crumb:hover {
    color: var(--ink);
    transition-duration: var(--dur-in);
  }

  .case-crumb:hover::before {
    transform: translateX(-4px);
    transition-duration: var(--dur-in);
  }
}

/* Index */
.case-index-hero {
  padding: clamp(72px, 10vw, 148px) 0 clamp(54px, 8vw, 104px);
}

.case-index-hero__grid {
  display: grid;
  gap: 30px;
}

.case-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-ink);
}

.case-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-dim);
}

.case-index-hero h1,
.case-detail-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.85rem, 1.5rem + 5.4vw, 6.8rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.case-index-hero__lede {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.case-index-hero__aside {
  display: grid;
  align-content: end;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.case-index-hero__aside strong {
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.case-index-hero__aside span {
  max-width: 28ch;
  color: var(--ink-3);
}

.case-listing {
  padding-bottom: clamp(88px, 12vw, 164px);
}

.case-listing__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.case-listing__head h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.case-listing__head p {
  max-width: 44ch;
  color: var(--ink-3);
}

.case-grid {
  display: grid;
  gap: 18px;
}

.case-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--paper-2);
  box-shadow: var(--sh-1);
  transition:
    transform var(--dur-out) var(--ease-hover),
    box-shadow var(--dur-out) var(--ease-hover),
    background-color var(--dur-out) var(--ease-hover);
}

.case-card__image {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  background: var(--paper-3);
}

.case-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 11, 12, .18));
  pointer-events: none;
}

.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}

.case-card__body {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(24px, 3vw, 38px);
}

.case-card__top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.case-card__type {
  color: var(--accent-ink);
}

.case-card__result {
  color: var(--ink-3);
  text-align: right;
}

.case-card h3 {
  max-width: 19ch;
  font-size: clamp(1.55rem, 1.25rem + 1.35vw, 2.55rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.case-card__summary {
  max-width: 56ch;
  margin-top: 18px;
  color: var(--ink-3);
  line-height: var(--lh-body);
}

.case-card__foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 32px;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.case-tag {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--paper-3);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .02em;
}

.case-card__arrow {
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 19px;
  transition:
    transform var(--dur-out) var(--ease-hover),
    background-color var(--dur-out) var(--ease-hover);
}

@media (hover: hover) {
  /* No hover skirt here, unlike the tiles in main.css: .case-card clips its own box so
     the image corners follow the card radius across the three grid variants below, and a
     clipped pseudo cannot reach the band the lift vacates. The card therefore keeps the
     5px hit-box shift at its bottom edge. Moving the clip onto .case-card__image is the
     fix, but the image sits in a different corner in each variant, so its radius would
     have to be set per variant. */
  .case-card:hover {
    transform: translateY(var(--lift));
    background: var(--paper);
    box-shadow: var(--sh-2);
    transition-duration: var(--dur-in);
  }

  .case-card:hover .case-card__image img {
    transform: scale(1.035);
  }

  .case-card:hover .case-card__arrow {
    transform: rotate(45deg);
    background: var(--accent-ink);
    transition-duration: var(--dur-in);
  }
}

@media (hover: hover) {
  html.is-scrolling .case-card:hover {
    transform: none;
    background: var(--paper-2);
    box-shadow: var(--sh-1);
    transition: none;
  }

  html.is-scrolling .case-card:hover .case-card__image img,
  html.is-scrolling .case-card:hover .case-card__arrow {
    transform: none;
    transition: none;
  }

  html.is-scrolling .case-card:hover .case-card__arrow {
    background: var(--ink);
  }
}

/* Detail */
.case-detail-hero {
  padding: clamp(44px, 7vw, 96px) 0 clamp(42px, 6vw, 74px);
}

.case-detail-hero__top {
  display: grid;
  gap: clamp(32px, 5vw, 68px);
  margin-top: clamp(56px, 8vw, 112px);
}

.case-detail-hero__copy {
  display: grid;
  gap: 24px;
}

.case-detail-hero h1 {
  max-width: 13ch;
  font-size: clamp(2.65rem, 1.55rem + 4.6vw, 6.1rem);
}

.case-deck {
  max-width: 64ch;
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.case-facts-panel {
  display: grid;
  align-content: end;
  gap: 18px;
}

.case-fact {
  display: grid;
  gap: 7px;
}

.case-label {
  color: var(--ink-3);
}

.case-fact strong {
  font-size: var(--fs-body);
  font-weight: 550;
}

.case-live-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 17px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform var(--dur-out) var(--ease-hover), background-color var(--dur-out) var(--ease-hover);
}

.case-live-link::after {
  content: "↗";
  font-size: 1.05rem;
}

.case-live-note {
  max-width: 34ch;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

@media (hover: hover) {
  .case-live-link:hover {
    transform: translateY(-2px);
    background: var(--accent-ink);
    transition-duration: var(--dur-in);
  }
}

.case-hero-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-top: clamp(42px, 7vw, 86px);
  border-radius: clamp(16px, 2.5vw, 28px);
  background: var(--paper-3);
  box-shadow: var(--sh-3);
}

.case-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: inherit;
  pointer-events: none;
}

.case-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-narrative {
  padding: clamp(84px, 12vw, 164px) 0;
}

.case-narrative__intro {
  display: grid;
  gap: 28px;
  margin-bottom: clamp(62px, 9vw, 116px);
}

.case-narrative__intro h2,
.case-results h2,
.case-approach h2 {
  max-width: 13ch;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.038em;
  text-wrap: balance;
}

.case-narrative__intro p {
  max-width: 66ch;
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: 1.75;
}

.case-approach {
  display: grid;
  gap: 34px;
}

.case-steps {
  display: grid;
  border-top: 1px solid var(--line);
}

.case-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.case-step__index {
  font-family: var(--mono);
  color: var(--accent-ink);
  font-size: var(--fs-label);
}

.case-step p {
  max-width: 62ch;
  color: var(--ink-2);
  line-height: var(--lh-body);
}

.case-results {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 10vw, 134px) 0;
  background: var(--ink);
  color: var(--paper);
}

.case-results::before {
  content: "";
  position: absolute;
  width: min(50vw, 680px);
  aspect-ratio: 1;
  top: -46%;
  right: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 198, 132, .28), transparent 67%);
}

.case-results__head {
  position: relative;
  display: grid;
  gap: 22px;
  margin-bottom: clamp(44px, 6vw, 76px);
}

.case-results__head p {
  max-width: 56ch;
  color: rgba(255, 255, 255, .64);
  line-height: var(--lh-body);
}

.case-result-grid {
  position: relative;
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-card);
  overflow: hidden;
}

.case-result {
  display: grid;
  align-content: space-between;
  min-height: 210px;
  gap: 26px;
  padding: clamp(24px, 3.5vw, 40px);
  background: #121314;
}

.case-result strong {
  font-family: var(--mono);
  font-size: clamp(2.15rem, 1.55rem + 2.5vw, 4.1rem);
  font-weight: 350;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.case-result span {
  max-width: 30ch;
  color: rgba(255, 255, 255, .78);
  line-height: 1.5;
}

.case-proof-note {
  position: relative;
  margin-top: 22px;
  color: rgba(255, 255, 255, .48);
  text-transform: none;
  letter-spacing: .03em;
}

.case-next {
  padding: clamp(74px, 10vw, 128px) 0;
}

.case-next__link {
  display: grid;
  gap: 22px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.case-next__label {
  color: var(--ink-3);
}

.case-next__title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.case-next__title strong {
  max-width: 18ch;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.038em;
}

.case-next__title span {
  display: grid;
  width: 52px;
  height: 52px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 21px;
  transition: transform var(--dur-out) var(--ease-hover);
}

@media (hover: hover) {
  .case-next__link:hover .case-next__title span {
    transform: rotate(45deg);
    transition-duration: var(--dur-in);
  }
}

.case-footer {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.case-listing--studio {
  padding-top: clamp(20px, 4vw, 52px);
  background: var(--paper-2);
}

/* Concepts sit on the plain page ground rather than the tinted band above them: the
   tint marks the software we actually build and run, and dropping out of it is what
   separates that from the self-directed work. Only the top padding is restated — the
   band above already carries its own bottom padding. */
/* Ventures keep the tinted band: like the software above them these are things
   Luminous runs, and the tint is what separates work we own from work we were
   commissioned for. Concepts drop out of it onto the plain page ground. */
.case-listing--ventures {
  padding-top: clamp(56px, 7vw, 96px);
  background: var(--paper-2);
}

.case-listing--concepts {
  padding-top: clamp(56px, 7vw, 96px);
}

.case-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.case-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.case-footer__links a {
  transition: color var(--dur-out) var(--ease-hover);
}

@media (hover: hover) {
  .case-footer__links a:hover {
    color: var(--ink);
    transition-duration: var(--dur-in);
  }
}

@media (min-width: 760px) {
  .case-index-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, .45fr);
    align-items: end;
  }

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

  .case-card:first-child {
    grid-column: 1 / -1;
    grid-template-columns: 1.14fr .86fr;
  }

  .case-card:first-child .case-card__image {
    min-height: 540px;
  }

  .case-card:first-child .case-card__body {
    min-height: 540px;
  }

  .case-card:nth-child(4),
  .case-card:nth-child(7) {
    grid-column: 1 / -1;
    grid-template-columns: .9fr 1.1fr;
  }

  .case-card:nth-child(4) .case-card__image,
  .case-card:nth-child(7) .case-card__image {
    order: 2;
  }

  .case-detail-hero__top {
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, .4fr);
    align-items: end;
  }

  .case-facts {
    grid-template-columns: 1fr;
  }

  .case-narrative__intro,
  .case-approach,
  .case-results__head {
    grid-template-columns: minmax(220px, .42fr) minmax(0, .58fr);
    align-items: start;
  }

  .case-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-result-grid:has(.case-result:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .case-card:nth-child(2),
  .case-card:nth-child(3),
  .case-card:nth-child(5),
  .case-card:nth-child(6),
  .case-card:nth-child(8),
  .case-card:nth-child(9) {
    min-height: 650px;
  }
}

@media (max-width: 759px) {
  .case-listing__head {
    display: grid;
  }

  .case-card__image {
    aspect-ratio: 4 / 3;
  }

  .case-result-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-card,
  .case-card__image img,
  .case-card__arrow,
  .case-next__title span {
    transition: none;
  }
}