/* Case studies: one Deck of big coloured cards (Brand Appart style) that stack and fly away on scroll.
   Builds on case.css tokens, top bar and footer. The earlier Table, Zoom and Apps views are in archive/case-study-views/. */
.bar-title b { color: var(--text); font-weight: 500; }

.s-main {
  overflow-x: clip;
  padding-bottom: clamp(48px, 7vw, 96px);
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px);
  background-size: 24px 24px;
}
.s-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; padding-block: clamp(32px, 5vw, 64px) clamp(12px, 2vw, 20px); }
.s-head h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 0.95; letter-spacing: -0.035em; }
.s-head .soft { display: block; color: var(--text-faint); }
.s-head sup { font-family: var(--f-mono); font-weight: 400; font-size: 0.18em; letter-spacing: 0.02em; vertical-align: top; margin-left: 0.3em; color: var(--text-soft); position: relative; top: 0.5em; }

/* ---------- Deck ---------- */
.deck { --bar: 64px; position: relative; }
.deck-sticky { display: grid; gap: 20px; width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; padding-top: 16px; }
.deck.live { height: calc(var(--n, 4) * 100svh); }
.deck.live .deck-sticky { position: sticky; top: var(--bar); width: 100%; height: calc(100svh - var(--bar)); padding: 0; display: block; perspective: 1800px; overflow: hidden; }
.dk-card {
  position: relative; border-radius: 24px; background: var(--c); color: #fff; overflow: hidden;
  padding: clamp(20px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(20px, 3.4vw, 52px);
}
.deck.live .dk-card {
  position: absolute; left: 50%; top: clamp(8px, 2.5vh, 28px);
  width: min(1240px, 100% - 2 * var(--gutter)); height: min(640px, calc(100svh - var(--bar) - 120px)); min-height: 0;
  transform-origin: 50% 100%; will-change: transform; backface-visibility: hidden; contain: layout paint;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 80px rgba(0, 0, 0, 0.35);
}
.dk-text { display: flex; flex-direction: column; align-self: stretch; min-height: 0; }
.dk-cover { margin: 0; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.12); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); }
.dk-cover img { width: 100%; height: auto; display: block; }
.dk-name { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 14px; }
.dk-card h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 3.1vw, 2.9rem); line-height: 1.03; letter-spacing: -0.03em; max-width: 16ch; }
.dk-no { font-family: var(--f-body); font-weight: 300; font-size: 1.25rem; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); }
.dk-desc { margin-top: 16px; max-width: 44ch; color: rgba(255, 255, 255, 0.8); font-size: clamp(0.95rem, 1.25vw, 1.125rem); line-height: 1.55; }
.dk-facts { margin-top: auto; padding-top: 24px; }
.dk-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-meta span { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); }
.dk-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 18px; border-radius: 10px; background: #fff; color: #14121F; text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; transition: transform .25s var(--ease); }
.dk-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.dk-cta:hover { transform: translateY(-2px); }
.dk-cta:hover svg { transform: translateX(3px); }

@media (max-width: 860px) {
  .dk-card { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .dk-cover { order: -1; }
  .dk-facts { padding-top: 18px; }
}
@media (max-width: 560px) {
  .deck { --bar: 56px; }
  .deck.live .dk-card { height: calc(100svh - var(--bar) - 100px); }
  .dk-card h2 { max-width: none; }
  .dk-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}