/* Case studies index, studio look. Uses ../site.css primitives; page-only layout here. */

/* ---------- hero ---------- */
.cs-hero { padding: clamp(150px, 19vh, 210px) 0 clamp(40px, 5vw, 70px); }
.cs-hero .disp { font-size: clamp(51.3px, 8.4vw, 124px); }
.cs-hero .lede { margin-top: clamp(30px, 3.4vw, 48px); max-width: 30em; color: var(--tx); }

/* ---------- names strip (decorative, as on the live page) ---------- */
.names { position: relative; z-index: 2; overflow: hidden; padding: 18px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.names .track { display: flex; align-items: center; gap: 44px; width: max-content; animation: marq 46s linear infinite; }
.names span { font-weight: 550; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.015em; color: var(--tx2); white-space: nowrap; }
.names i { font-style: normal; color: var(--tx3); font-size: 18px; }

/* ---------- cases ---------- */
.cases { padding: clamp(70px, 8vw, 130px) 0 clamp(40px, 5vw, 80px); }
.case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(30px, 6vw, 110px); align-items: center;
  text-decoration: none; color: var(--tx); padding: clamp(40px, 5vw, 70px) 0; border-top: 1px solid var(--hair); }
.case .ph { order: 2; position: relative; }
.case.flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.case.flip .ph { order: 0; }
.case .print { max-width: 380px; margin-left: auto; padding: 12px; border-radius: 16px; transition: box-shadow .4s var(--expo); }
.case.flip .print { margin-left: 0; margin-right: auto; }
.case .print img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 22%; border-radius: 8px; filter: saturate(.92) contrast(1.03); }
.case .ph { transform: rotate(1.4deg); transition: transform .6s var(--back); }
.case.flip .ph { transform: rotate(-1.4deg); }
.case:hover .ph { transform: rotate(0) translateY(-6px); }

.case .big { font: 800 clamp(60px, 7.8vw, 124px)/.86 "IMDisplay", sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.case .big .from { color: var(--tx2); }
.case .big small { font-size: .42em; letter-spacing: -.03em; }
.case .what { margin-top: 22px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.4; font-weight: 550; color: var(--tx); max-width: 24em; }
.case .who { margin-top: clamp(28px, 3vw, 44px); padding-top: 22px; border-top: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.case .who b { display: block; font-size: clamp(21px, 1.7vw, 25px); font-weight: 650; letter-spacing: -.01em; }
.case .who div span { display: block; margin-top: 4px; font-size: 17px; color: var(--tx2); }
.case .go { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tx); color: var(--ink);
  font-size: 22px; margin-top: 0; box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.8); transition: transform .4s var(--back); }
.case:hover .go { transform: translateX(6px); }
.case:focus-visible { outline: 2px solid var(--tx); outline-offset: 8px; border-radius: 6px; }
.cases .asof { margin-top: 30px; }

/* ---------- what is the same ---------- */
.same { padding: clamp(110px, 13vw, 200px) 0 clamp(40px, 5vw, 70px); }
.same .disp { font-size: clamp(44.65px, 6.17vw, 100.02px); }
.trio { margin-top: clamp(50px, 6vw, 90px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 54px); }
.trio > div { padding-top: 26px; border-top: 1px solid var(--hair); }
.trio h3 { font-size: clamp(22px, 1.8vw, 27px); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.trio p { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--tx2); }
.trio strong { color: var(--tx); font-weight: 550; }

/* ---------- close ---------- */
.close .ctas .link { margin-left: 6px; }

@media (max-width: 860px) {
  .cs-hero { padding-top: 120px; }
  .cs-hero .disp { font-size: clamp(44px, 15.2vw, 80px); }
  .case, .case.flip { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .case .ph, .case.flip .ph { order: 0; }
  .case .print, .case.flip .print { max-width: 250px; margin: 0; padding: 9px; }
  .case .big { white-space: normal; }
  .case .go { width: 46px; height: 46px; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (prefers-reduced-motion: reduce) { .names .track { animation: none; } }