/* ThatsKrispy — Behind the Scenes page (/work/), beta design language */

.bts-hero { padding: clamp(2.4rem, 5vw, 4.5rem) 0 clamp(1.6rem, 3vw, 2.6rem); }
.bts-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.bts-hero .lede { margin-top: 1.3rem; }
.bts-hero .cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.9rem; justify-content: flex-start; }

.bts-sec { padding: clamp(2.2rem, 4.5vw, 3.8rem) 0; }
.bts-sec .lede { margin-top: 0.7rem; }

.bts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.bts-tile { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #eae7df; }
.bts-tile img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.bts-tile:hover img { transform: scale(1.04); }
.bts-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.7rem;
  background: linear-gradient(to top, rgba(16, 16, 16, 0.72), transparent);
  color: #fffdf8; font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.3s;
}
.bts-tile:hover figcaption { opacity: 1; }
.bts-grid.four { grid-template-columns: repeat(4, 1fr); }
.bts-grid.four .bts-tile img { aspect-ratio: 3 / 4; }

/* dark reel band */
.bts-reelband { background: var(--ink); padding: clamp(2.6rem, 5vw, 4.2rem) 0; }
.bts-reelband .eb { color: #b9b4a8; }
.bts-reelband .display { color: #fff; }
.bts-reelband .display .ital { color: #ff6b57; }
.bts-reelband .lede { color: #cbc8c0; }
.bts-reel {
  margin: clamp(1.4rem, 2.6vw, 2rem) auto 0;
  max-width: 30rem;
}
.bts-reel video {
  display: block; width: 100%; border-radius: 16px;
  border: 1px solid #2b2a27;
}
.bts-reel figcaption {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.8rem; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #b9b4a8;
}
.bts-reel figcaption::before { content: ""; width: 0.45rem; height: 0.45rem; background: var(--red); border-radius: 1px; flex: none; }

@media (max-width: 860px) {
  .bts-grid, .bts-grid.four { grid-template-columns: repeat(2, 1fr); }
  .bts-tile figcaption { opacity: 1; }
}
@media (max-width: 480px) {
  .bts-grid.four { grid-template-columns: repeat(2, 1fr); }
}