/* ---------- case study detail pages ---------- */
.cs-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(2,2,2,0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.cs-nav{
  max-width: var(--maxw); margin: 0 auto; padding: var(--s2) var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.cs-back{
  font-size: 14px; color: var(--white); display: inline-flex; align-items: center; gap: 6px;
  transition: opacity .2s;
}
.cs-back:hover{ opacity: .6; }

.cs-hero{ padding: var(--s5) var(--s4) var(--s4); max-width: var(--maxw); margin: 0 auto; }
.cs-eyebrow{ font-size: 14px; letter-spacing: .02em; color: var(--ash); margin-bottom: var(--s2); }
.cs-title{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 7vw, 92px); line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: var(--s3); max-width: 900px;
  opacity: 0; transform: translateY(20px);
  animation: heroIn 1s var(--ease-glide) .1s forwards;
}
.cs-role{ font-size: 16px; color: var(--ash); max-width: 640px; }
.cs-hook{ font-family: var(--body-sans); font-size: 20px; line-height: 1.6; color: var(--white); opacity: .85; max-width: 720px; margin-top: var(--s3); }

.cs-gallery{
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4) var(--s4);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2);
  align-items: start;
}
/* Frames hug their image: no forced aspect-ratio, so portrait art in a wide slot
   no longer sits in a letterboxed black box. Height follows the image. */
.cs-gallery img{
  width: 100%; height: auto; display: block;
  transition: transform .5s var(--ease-glide);
}
.cs-gallery a{ display:block; overflow:hidden; border: 1px solid var(--hairline); line-height: 0; }
.cs-gallery a:hover img{ transform: scale(1.03); }
.cs-gallery .reveal{
  opacity: 0; transform: translateY(24px) scale(1.02);
  transition: opacity .55s var(--ease-glide), transform .55s var(--ease-glide);
}
.cs-gallery .reveal.in-view{ opacity: 1; transform: translateY(0) scale(1); }
.cs-gallery .reveal:nth-child(2n){ transition-delay: .08s; }
.cs-gallery .reveal:nth-child(3n){ transition-delay: .16s; }
/* Full-width slots shrink-wrap their image and centre, so a tall portrait gets a frame
   that hugs it instead of a page-wide box with dead space either side. */
.cs-g-full{ grid-column: span 6; justify-self: center; max-width: 100%; }
.cs-g-full img{ max-height: 82vh; max-width: 100%; width: auto; height: auto; }
.cs-g-half{ grid-column: span 3; }
.cs-g-third{ grid-column: span 2; }

.cs-story{
  max-width: 900px; margin: 0 auto; padding: 0 var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
.cs-story img{ width: 100%; display: block; border: 1px solid var(--hairline); }
.cs-story .reveal{
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s var(--ease-glide), transform .55s var(--ease-glide);
}
.cs-story .reveal.in-view{ opacity: 1; transform: translateY(0); }
.cs-inline-img{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4) var(--s4); }
.cs-inline-img img{ width: 100%; display: block; border: 1px solid var(--hairline); }
.cs-inline-img.reveal{
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s var(--ease-glide), transform .55s var(--ease-glide);
}
.cs-inline-img.reveal.in-view{ opacity: 1; transform: translateY(0); }
.cs-inline-img.small{ max-width: 560px; padding-left: 0; padding-right: 0; }
.cs-inline-img.small img{ width: 100%; }

.cs-story-heading{
  max-width: 900px; margin: var(--s4) auto var(--s3); padding: 0 var(--s4);
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ash);
}

.cs-body{
  max-width: 760px; margin: 0 auto; padding: var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: var(--s4);
}
.cs-body h2{
  font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.01em;
  border-top: 1px solid var(--hairline); padding-top: var(--s3);
}
.cs-body p{ font-family: var(--body-sans); font-size: 17px; line-height: 1.7; color: var(--white); opacity: .85; }
.cs-body .stats{ margin-top: 0; }
.cs-body .stats li{ font-size: 15px; }
.cs-docs{ display: flex; flex-wrap: wrap; gap: var(--s2); }

.cs-footer-nav{
  max-width: var(--maxw); margin: 0 auto; padding: var(--s4); border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
}

@media (max-width: 860px){
  .cs-g-half{ grid-column: span 3; }
  .cs-g-third{ grid-column: span 3; }
}
@media (max-width: 620px){
  .cs-gallery{ grid-template-columns: 1fr; }
  .cs-g-full, .cs-g-half, .cs-g-third{ grid-column: span 1; }
  .cs-g-full img{ max-height: none; width: 100%; }
}

/* ---------- phone layer ---------- */
@media (max-width: 760px){
  .cs-title{ font-size: clamp(32px, 9.5vw, 48px); line-height: 1.06; }
  .cs-hook{ font-size: 17px; line-height: 1.62; margin-top: var(--s2); }
  .cs-role{ font-size: 15px; }
  .cs-eyebrow{ font-size: 13px; }
  .cs-body{ gap: var(--s3); }
  .cs-body p{ font-size: 16px; line-height: 1.68; }
  .cs-body h2{ font-size: 21px; }
  .cs-body .stats li{ font-size: 14px; }
  /* stack the footer nav so the back-link and name don't collide */
  .cs-footer-nav{ flex-direction: column; align-items: flex-start; gap: var(--s2); }
  /* embedded prototypes/zines are unusable at 16:10 on a phone */
  .figma-frame-wrap, .zine-frame-wrap{ aspect-ratio: 3/4; }
}