/* Project (case study) pages. Loaded after styles.css. */

.case > section, .case > header, .case > figure { padding: 0 var(--gutter); }

/* ---------- Header ---------- */
.case-head {
  display: grid; grid-template-columns: 1fr minmax(240px, 360px); gap: 24px 48px; align-items: end;
  padding-top: clamp(56px, 9vw, 120px) !important; padding-bottom: clamp(32px, 4vw, 56px) !important;
}
.case-head .kicker { grid-column: 1 / -1; }
/* the name gets its own full-width row; intro (left) and facts (right) sit underneath */
.case-head > div { display: contents; }
.case-title { grid-column: 1 / -1; white-space: nowrap; }   /* one line on desktop; case.js shrinks it if a long name doesn't fit */
.case-lead { grid-column: 1; }
.case-meta { grid-column: 2; }
.case-title {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(56px, 11vw, 190px); line-height: .9; letter-spacing: -.04em;
}
.case-lead { max-width: 30ch; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; color: var(--muted); }
.case-meta { display: grid; gap: 14px; margin: 0; padding-bottom: .5em; }
.case-meta div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.case-meta dt { color: var(--muted); }
.case-meta dd { margin: 0; }

/* ---------- Images / videos (filled in by case.js from data-src) ---------- */
.shot { position: relative; margin: 0; overflow: hidden; background: color-mix(in srgb, var(--ink) 5%, var(--bg)); }
.shot > img, .shot > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot--contain > img, .shot--contain > video { object-fit: contain; }
/* shown until the real file is added: says exactly which file goes here */
.shot__ph {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 16px; text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--ink) 4%, transparent) 14px 15px),
    color-mix(in srgb, var(--ink) 5%, var(--bg));
  color: var(--muted); font-size: 13px;
}
.shot__ph strong { color: var(--ink); font-weight: 500; font-size: 15px; }
.shot__ph code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .8; }

/* videos sit on a dark surface that fills the frame, like a screen on a desk.
   A project page can match its images by setting, on its chapters section:
   --video-bg (surface colour), --video-radius (corners of the video), --video-shadow */
.shot--video { background: var(--video-bg, #1b1c1c); padding: clamp(16px, 3.2vw, 48px); }
.shot--video > video {
  border-radius: var(--video-radius, 0);
  box-shadow: var(--video-shadow, 0 10px 30px -10px rgba(0, 0, 0, .55));
}
/* in the chapter panel a video always fits whole (portrait phone recordings sit centred, they don't scroll) */
.split__track .shot--video { align-items: center; }
.split__track .shot--video > video { width: auto; max-width: 100%; max-height: 100%; }

.kicker--num::before { content: attr(data-num) " — "; color: var(--accent); }

/* ---------- Chapters: two columns, text locks while its image scrolls in a sticky slot ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6vw;
  padding-top: clamp(40px, 6vw, 96px) !important;
}
/* Each chapter: its text locks (sticky) while the image scrolls through its full length in the slot;
   then the text moves on and the next image slides in. Chapter heights are set by case.js. */
.split__block { position: relative; }
.split__inner {
  position: sticky; top: 12vh; height: 76vh;
  display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 46ch;
}
.split__block h2 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.025em;
}
.split__block p, .split__block li { color: var(--muted); font-size: 17px; line-height: 1.55; }
.split__block ul { padding-left: 1.1em; display: grid; gap: 8px; list-style: disc; }
.split__inline { display: none; }
.split__media { position: relative; }
.split__slot {
  position: sticky; top: 12vh; height: 76vh; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 5%, var(--bg));
}
/* images are stacked like cards: the top one slides up to reveal the next, already in place below */
.split__track { position: relative; height: 100%; isolation: isolate; }   /* the card stack is its own layer, so the counter stays above every image */
.split__track .shot {
  position: absolute; inset: 0; height: 100%; border-radius: 0; will-change: transform;
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .28);   /* marks the bottom edge while it slides away */
}
/* media shorter than the slot (e.g. a wide video) sits in the middle; taller ones start at the top */
.split__track .shot { display: flex; flex-direction: column; justify-content: safe center; }
.split__track .shot > img, .split__track .shot > video { flex-shrink: 0; }
/* full width, natural height: case.js moves the image up through the slot */
.split__track .shot > img, .split__track .shot > video { height: auto; object-fit: fill; will-change: transform; }
.split__count {
  position: absolute; right: 16px; bottom: 14px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); color: var(--ink);
}

/* ---------- Next project ---------- */
.case-next {
  display: grid; gap: 10px; margin: clamp(80px, 12vw, 180px) var(--gutter) 0;
  padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--line);
}
.case-next__title {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(44px, 8vw, 140px); line-height: .95; letter-spacing: -.04em;
  transition: transform .5s var(--ease), color .3s;
}
.case-next:hover .case-next__title { transform: translateX(14px); color: var(--accent); }
.case-next__title .icon { width: .72em; height: .72em; vertical-align: -.02em; stroke-width: 2.6; }   /* a bit heavier than body-text arrows */

/* ---------- Floating pill on project pages: back + next ---------- */
.jump--case { gap: 2px; }
.jump--case a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; color: inherit; text-decoration: none;
  transition: background .25s;
}
.jump--case a:last-child { background: color-mix(in srgb, var(--bg) 14%, transparent); }
@media (hover: hover) { .jump--case a:hover { background: color-mix(in srgb, var(--bg) 24%, transparent); } }

/* ---------- Phones / narrow screens: chapters become a simple vertical story ---------- */
@media (max-width: 900px) {
  .case-head { grid-template-columns: 1fr; }
  .case-lead, .case-meta { grid-column: 1; }
  .case-title { white-space: normal; }   /* phones: wrap between words (only a too-long single word gets shrunk) */
  .split { grid-template-columns: 1fr; gap: 0; }
  .split__media { display: none; }
  .split__block { height: auto !important; padding: 40px 0; }
  .split__inner { position: static; height: auto; max-width: none; }
  .split__inline { display: block; aspect-ratio: 4 / 3; margin-top: 12px; }   /* 4:3 only while it's a placeholder */
  .split__inline:has(> img, > video) { aspect-ratio: auto; }
  .split__inline > img, .split__inline > video { height: auto; }
  .split__inline.shot--video { display: flex; justify-content: center; }
  .split__inline.shot--video > video { width: auto; max-width: 100%; max-height: 70vh; }
}