/* Work page */

.page-work .nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
}

.proj-header {
  position: fixed; left: 0; right: 0; z-index: 190;
  background: var(--bg);
}
.subnav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
  row-gap: .3rem;
  padding: 20px 20px 20px;
  border-bottom: 1px solid var(--divider-subtle);
}
.subnav-date {
  grid-column: 1; grid-row: 1;
  font-size: var(--type-sm-semi-size); letter-spacing: var(--type-sm-semi-tracking); color: var(--muted);
  font-weight: 500; line-height: var(--type-sm-semi-lh);
}
.subnav-left {
  grid-column: 1; grid-row: 2;
  display: flex; gap: 1.25rem; align-items: center;
}
.subnav-tab {
  font-size: var(--type-sm-reg-size); font-weight: 400; color: var(--muted);
  letter-spacing: var(--type-sm-reg-tracking); line-height: var(--type-sm-reg-lh);
  padding-bottom: 2px; transition: color .2s, font-weight .2s;
  position: relative;
}
.subnav-tab.active { color: var(--text); font-weight: 500; }
.subnav-tab:hover  { color: var(--text); font-weight: 500; }
.subnav-tab.active::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--text);
}
.subnav-client {
  grid-column: 2; grid-row: 2;
  font-size: var(--type-sm-reg-size); font-weight: 400; color: var(--muted);
  letter-spacing: var(--type-sm-reg-tracking); line-height: var(--type-sm-reg-lh);
  align-self: center; opacity: 0; transition: opacity .3s var(--expo);
}
.subnav-client.visible {
  opacity: 1;
  font-weight: 500;
  color: var(--text);
}
.subnav-tags {
  grid-column: 3 / 7; grid-row: 2;
  display: flex; gap: 1.25rem; align-items: center;
}
.subnav-tag {
  font-size: var(--type-sm-reg-size); font-weight: 400; color: var(--muted);
  letter-spacing: var(--type-sm-reg-tracking); line-height: var(--type-sm-reg-lh);
  transition: color .2s, font-weight .2s; cursor: default;
}
.subnav-tag.active { color: var(--text); font-weight: 500; }

.scroll-area {
  position: fixed; left: 0; right: 0;
  overflow-y: scroll; overflow-x: clip;
}
.scroll-area::-webkit-scrollbar { display: none; }
.scroll-area { scrollbar-width: none; }

.case-study { }
.page-work .case-study + .case-study {
  margin-top: 80px;
}
.case-study-section-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cs-info { display: none; }

.cs-images {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
  gap: 12px;
  padding: 20px 20px 0 20px;
}
/* Trailing gutter matches left inset when scrolled to the end */
.cs-images::after {
  content: '';
  flex: 0 0 0;
  min-width: 0;
  align-self: stretch;
  pointer-events: none;
  scroll-snap-align: none;
}
.cs-images::-webkit-scrollbar { display: none; }
.cs-images { scrollbar-width: none; }

.cs-images-well .cs-img {
  flex: 0 0 auto;
  height: 55vh;
  width: auto;
  overflow: hidden;
  background: transparent;
  scroll-snap-align: start;
}
.cs-images-well .cs-img img {
  height: 100%;
  width: auto;
  max-height: 55vh;
  display: block;
  user-select: none;
  pointer-events: none;
}

.cs-img-browser {
  flex: 0 0 min(75vw, 960px);
  aspect-ratio: 16/9;
  overflow: hidden; background: var(--card);
  scroll-snap-align: start;
}
.cs-img-browser img,
.cs-img-browser video {
  width: 100%; height: 100%; object-fit: cover;
  display: block; user-select: none; pointer-events: none;
}

/* YCharts strip: never crop images or video */
.cs-images-ycharts .cs-img-browser img,
.cs-images-ycharts .cs-img-browser video {
  object-fit: contain;
  background: var(--card);
}

.cs-img-realizeit {
  flex: 0 0 min(85vw, 1100px);
  aspect-ratio: 16/9;
  overflow: hidden; background: var(--card);
  scroll-snap-align: start;
}
.cs-img-realizeit img,
.cs-img-realizeit video {
  width: 100%; height: 100%; object-fit: cover;
  display: block; user-select: none; pointer-events: none;
}

/* Well — multi-image frame: 4 screens side by side in one card */
.cs-img--multi {
  flex: 0 0 auto;
  height: 55vh;
  width: auto;
  overflow: hidden;
  background: var(--card);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 12px;
  box-sizing: border-box;
}
.cs-img--multi img {
  height: 100%;
  width: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}

/* Well — interactive palette card in carousel */
.cs-img--palette {
  flex: 0 0 auto;
  height: 55vh;
  aspect-ratio: 13 / 9;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: default;
  --palette-label: rgba(17, 17, 16, 0.88);
  --palette-label-inv: rgba(255, 255, 255, 0.92);
}
.cs-palette-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.cs-palette-row {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  flex: 1 1 0;
}
.cs-palette-cell {
  position: relative;
  background-color: var(--swatch);
  box-shadow: inset 0 0 0 1px var(--swatch);
  outline: 1px solid var(--swatch);
  outline-offset: -1px;
  transition: outline-color 0.1s;
}
.cs-palette-cell::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 9px;
  line-height: 1.2;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--palette-label);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s;
  z-index: 2;
  white-space: nowrap;
}
.cs-palette-cell:hover::before {
  content: attr(data-hex);
  opacity: 1;
}
.cs-palette-cell[data-ink="inv"]:hover::before {
  color: var(--palette-label-inv);
}

.cs-placeholder {
  width: 100%; height: 100%;
  background: var(--placeholder);
}

.cs-meta {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
  align-items: baseline;
  padding: 10px 20px;
  border-bottom: 1px solid var(--divider-subtle);
}
.cs-meta-client {
  grid-column: 2 / 3;
  text-align: right;
  font-size: var(--type-sm-semi-size); font-weight: 500; color: var(--text);
  letter-spacing: var(--type-sm-semi-tracking); line-height: var(--type-sm-semi-lh);
  white-space: nowrap;
}
.cs-meta-badge {
  grid-column: 1 / 2;
  justify-self: start;
  font-size: var(--type-sm-reg-size);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.cs-meta-desc {
  grid-column: 3 / 7;
  text-align: left;
  font-size: var(--type-sm-reg-size); font-weight: 400; color: var(--muted);
  letter-spacing: var(--type-sm-reg-tracking); line-height: var(--type-sm-reg-lh);
}

.page-work .footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
}

@media (max-width: 768px) {
  .page-work .nav { display: none; }
  .page-work .footer { display: none; }

  .page-work .subnav {
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 0;
    padding: 20px 10px 10px;
  }
  .page-work .subnav-date {
    grid-column: 2; grid-row: 1;
    font-size: var(--type-sm-reg-size); align-self: center;
  }
  .page-work .subnav-left { grid-column: 1; grid-row: 1; }
  .page-work .subnav-tab { font-size: var(--type-sm-reg-size); }
  .page-work .subnav-tab.active::after { display: none; }
  .page-work .subnav-client { display: none; }
  .page-work .subnav-tags   { display: none; }

  .page-work .cs-info {
    display: block;
    padding: 10px 10px 0;
  }
  .page-work .cs-info-client {
    font-size: var(--type-sm-semi-size); font-weight: 500;
    letter-spacing: var(--type-sm-semi-tracking); line-height: var(--type-sm-semi-lh);
    color: var(--text); margin-bottom: 2px;
  }
  .page-work .cs-info-desc {
    font-size: var(--type-sm-reg-size); font-weight: 400;
    letter-spacing: var(--type-sm-reg-tracking); line-height: var(--type-sm-reg-lh);
    line-height: 1.5; color: var(--text); margin-bottom: 4px;
  }
  .page-work .cs-info-tags {
    display: flex; gap: 4px; align-items: center;
    font-size: var(--type-sm-reg-size); font-weight: 400; color: var(--muted);
    letter-spacing: var(--type-sm-reg-tracking); line-height: var(--type-sm-reg-lh);
  }

  .page-work .cs-meta { display: none; }
  .page-work .cs-images {
    padding: 10px 10px 0 10px;
    gap: 8px;
    scroll-padding-left: 10px;
    scroll-padding-right: 10px;
  }
  .page-work .cs-images::after {
    flex: 0 0 0;
    min-width: 0;
  }
  .page-work .case-study + .case-study { margin-top: 40px; }
}