/* ============================================================
   PROJECT DETAIL — storytelling scroll layout
   Used by the project case pages (e.g. projects/touchthewall.html):
     ① title (.case-head)  ② overview (.case-overview, in styles.css)
     ③ indicator (.case-progress) + storytelling (.case-scroll)
   Type/colour pull from tokens.css. Image swap: js/case-scroll.js.
   ============================================================ */

/* ---------- section typography (used inside .case-step) ---------- */
.cs-kicker {                     /* "01  Mission" eyebrow */
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: var(--caption-1-size);
  line-height: var(--caption-1-line);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-kicker-num { color: var(--text-muted); }

.cs-h2 {
  font-family: var(--font-display);
  font-size: var(--title-2-size);
  line-height: var(--title-2-line);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
  color: var(--text);
  margin-bottom: 16px;
}
.cs-text {
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  color: var(--text-dim);
  margin-bottom: 16px;
}
.cs-text + .cs-text { margin-top: 14px; }
/* body text that follows an outcome block needs breathing room above it */
.overview-outcome + .cs-text,
.overview-outcome-row + .cs-text { margin-top: 32px; }

/* ---------- metric callouts (the skim payload) ---------- */
.cs-metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 32px;
}
.cs-metric { display: flex; flex-direction: column; gap: 6px; }
.cs-metric-num {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  color: var(--text);
}
.cs-metric-num--accent { color: var(--tag-accent-fg); }
.cs-metric-label {
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  color: var(--text-dim);
  max-width: 200px;
}

/* ============================================================
   OVERVIEW OUTCOME METRICS — compact result callout placed just
   under the Overview body text (.cs-text). A small "Outcome"
   eyebrow + a row of headline numbers with muted labels.
   Mirrors .cs-metric styling but scoped to the overview step.
   ============================================================ */
.overview-outcome {
  margin-top: 40px;          /* breathing room from the body text above */
}
.overview-outcome-label {    /* "OUTCOME" eyebrow */
  font-size: var(--caption-1-size);
  line-height: var(--caption-1-line);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.overview-outcome-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--case-column-gap);
}
.overview-outcome-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.overview-outcome-num {
  font-family: var(--font-display);
  font-size: var(--body-1-size);
  line-height: var(--body-1-line);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.overview-outcome-text {
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  color: var(--text-dim);
  max-width: none;
}

/* Subtext pair — two big rows stacked vertically. Within each row the
   highlight sits on top and its description directly beneath it. */
.overview-outcome:has(> .subtext-row) { margin-top: 20px; }  /* tighter gap from the body text above */
.subtext-row {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.subtext-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.subtext-highlight {
  font-family: var(--font-display);
  font-size: var(--body2-size);
  line-height: var(--line-2-line);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.subtext-description {
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  color: var(--text-muted);
}

/* ============================================================
   EXPERIMENT — conditions compared + metric comparison.
   Scoped to the Success Metrics step. "Adaptive" (the winner)
   is tinted with the Solution accent (#F14E2D) to tie the
   result back to the proposed solution; baselines stay muted.
   ============================================================ */
.exp-label {                      /* small eyebrow above each block */
  font-size: var(--caption-1-size);
  line-height: var(--caption-1-line);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* --- the five conditions --- */
.conditions { margin-top: 40px; }
.conditions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.condition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
}
.condition-name {
  flex: 1 1 180px;
  min-width: 0;
  font-size: var(--body-1-size);
  line-height: var(--body-1-line);
  letter-spacing: var(--tracking);
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.condition-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.condition-tag {
  font-size: var(--caption-1-size);
  line-height: 1;
  letter-spacing: var(--tracking);
  font-weight: var(--weight-medium);
  color: var(--text-dim);
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  white-space: nowrap;
}
.condition-tag--base {           /* the baseline pill — quiet, no border weight */
  color: var(--text-muted);
  border-style: dashed;
}
.condition-tag--win {            /* the Adaptive variant — the winner */
  color: #F14E2D;
  border-color: #F14E2D;
}

/* --- results: baseline vs adaptive per metric --- */
.metric-compare {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.mc-group {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-question {
  font-size: var(--title-3-size);
  line-height: var(--title-3-line);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.mc-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-row {
  display: grid;
  grid-template-columns: 1fr auto;   /* row 1: condition ↔ value */
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--off-white);
}
.mc-row--win {                   /* the winning (Adaptive) row — accent via text colour only */
  background: var(--off-white);
}
.mc-cond {
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  font-weight: var(--weight-semibold);
  color: var(--text-dim);
}
.mc-row--win .mc-cond { color: #F14E2D; }
.mc-val {
  font-family: var(--font-display);
  font-size: var(--body-1-size);
  line-height: 1.1;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.mc-row--win .mc-val { color: #F14E2D; }
.mc-note {
  grid-column: 1 / -1;             /* row 2: description spans full width */
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  color: var(--text-muted);
}
.mc-takeaway {                 
  margin-top: 4px;
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/* Detail pages: SOLID nav (no blur) so scrolling text cuts cleanly
   under it instead of ghosting. Main page keeps its blur. */
.project-detail nav {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.project-detail { --project-edge: 16px; }
.project-detail #site-nav { position: relative; padding-inline: var(--project-edge); }
.project-detail:not(.case-layout-page) .case-progress { top: 0; }

/* ============================================================
   ② OVERVIEW (shared) — first screen: 90vh, image NOT sticky,
   text column 40%. Per-project CSS may override (e.g. touchthewall
   stacks an image + video).
   ============================================================ */
.project-detail .case-overview {align-items: flex-start; }
.project-detail .case-aside {
  position: static;        /* no sticky in the overview */
  flex: 1 1 0;             /* basis 0 → image's intrinsic width can't inflate
                              the column; body stays a clean 40%, image 60% */
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
}
.project-detail .case-aside-media {
  border-radius: 0;
  height: auto;
  aspect-ratio: 16 / 10;
}
.project-detail .case-body {
  flex: 0 1 40%;
  max-width: 768px;
  padding-left: 40px;
}
.project-detail .case-block-text { max-width: none; }

/* ============================================================
   ③ INDICATOR — sticky bar attached right below the overview.
   Labels reveal one by one as you scroll (driven by case-scroll.js).
   ============================================================ */
.case-progress {
  position: sticky;
  top: 56px;                 /* sits just below the fixed nav */
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 40px 16px;
}
/* the bar only paints once a label is showing — invisible above that */
.case-progress:has(.is-shown) { background: var(--bg); }
.case-progress-item {
  display: none;             /* hidden until you reach its section */
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
}
.case-progress-item.is-shown {
  display: inline-block;
  animation: caseProgIn 0.35s var(--ease, ease) both;
}
.case-progress-item.is-active {   /* the section currently in view */
  color: var(--text);
  font-weight: var(--weight-semibold);
}
@keyframes caseProgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   ③ STORYTELLING — one pinned 16:9 visual that cross-fades while
   the 9 text sections scroll past. Tuned to the Touch The Wall
   ratio: wide visual + 40% text column.
   ============================================================ */
.case-scroll {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

/* LEFT — pinned visual; height comes from the 16:9 stage */
.case-scroll-visual {
  position: sticky;
  top: 156px;                /* gap from the top while pinned */
  flex: 1 1 auto;            /* takes whatever the text column leaves */
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
}
.case-scroll-stage {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;      /* always 16:9, computed from the column width */
  position: relative;
  overflow: hidden;
  background: var(--grey-100);
}
.case-scroll-media {          /* stacked; only the active one is visible */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s var(--ease, ease);
}
.case-scroll-media.is-active { opacity: 1; }
.case-scroll-media img,
.case-scroll-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* over-scale + GPU layer kills edge shimmer on 1x / 1080p displays */
  transform: scale(1.015) translateZ(0);
  backface-visibility: hidden;
}
.case-scroll-media--ph {      /* placeholder for steps without a real asset */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: var(--caption-1-size);
  letter-spacing: var(--tracking);
  font-weight: var(--weight-medium);
  background:
    repeating-linear-gradient(-45deg,
      var(--grey-100) 0, var(--grey-100) 12px,
      var(--bg) 12px, var(--bg) 24px);
}
/* Common rule: once a slide holds a real image/video, drop the placeholder
   chrome (padding + striped bg) so the asset fills the 16:9 frame via cover. */
.case-scroll-media--ph:has(img),
.case-scroll-media--ph:has(video) {
  padding: 0;
  background: none;
}

/* RIGHT — text column: 40% of viewport, capped at 768px for readability */
.case-scroll-body {
  flex: 0 1 40%;
  max-width: 768px;
  padding-left: 40px;
  padding-right: 40px;
}
.case-step {
  min-height: 100vh;          /* one screen per section */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* text centred against the pinned image */
  padding: 12vh 0;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* stack: short image band on top, steps scroll beneath */
  .case-scroll { flex-direction: column; }
  .case-scroll-visual { top: 56px; width: 100%; flex: none; }
  .case-progress { display: none; }   /* hide indicator on mobile */
  .case-scroll-body { flex: none; max-width: none; padding-left: 0; padding-right: 0; }
  .case-step { min-height: auto; padding: 40px 24px; }

  .cs-metric-row { gap: 28px; }
  .cs-metric-num { font-size: 38px; }

  .overview-outcome-row { gap: 32px; }
  .overview-outcome-num { font-size: 38px; }

  .subtext-row { gap: 24px; }
  .subtext-highlight { font-size: 28px; }

  .metric-compare { gap: 28px; }
  .mc-group { flex-basis: 100%; }       /* stack the two metrics on mobile */
}