/* ════════════════════════════════════════════
   CASE STUDY  case-study.css
   Left col sticky, right col scrolls (Hazey)
   ════════════════════════════════════════════ */

/* ── HEADER ── */
.cs-h {
  background: var(--paper);
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: 0;
}

.cs-h__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-50); transition: color .2s; margin-bottom: 52px;
}
.cs-h__back:hover { color: var(--ink); }

.cs-h__back span {
  font-size:12px;
}

/* two-col: meta left, hero image right */
.cs-h__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 100px;
}

.cs-h__meta { display:flex; flex-direction:column; gap:0; }

.cs-h__title {
  font-family: var(--d);
  font-size: clamp(44px, 6vw, 83px);
  color: var(--ink); text-transform: uppercase;
  letter-spacing: -.02em; line-height: .96;
  margin-bottom: 32px;
}

.cs-h__table { border-top: 1px solid var(--ink-10); }

.cs-h__row {
  display: grid; grid-template-columns: 90px 1fr;
  gap: 16px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid var(--ink-10);
}

.cs-h__lbl { font-size:9.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-50); padding-top:3px; }
.cs-h__val { font-size:13px; color:var(--ink); line-height:1.5; }

.cs-h__desc {
  margin-top: 24px;
  font-size: 13.5px; line-height: 1.8; color: var(--ink-50);
}

/* hero image – right */
.cs-h__img { overflow:hidden; border-radius:8px;}
.cs-h__img .ph { width:100%; border-radius:8px;}

/* full-bleed opener (below header, edge-to-edge) */
.cs-full { width:100%; overflow:hidden; margin-top:8px; }
.cs-full .ph, .cs-full img { width:100%; }

/* ── PARALLAX MODIFIER ── */
.cs-full--parallax {
  position: relative;
  height: 100vh;
  overflow: hidden;
  border-radius:0;

}



.cs-full--parallax img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* ════════════════════════════════════════════
   MAIN LAYOUT:
   Left sticky col  |  Right scrollable col
   ════════════════════════════════════════════ */
.cs-layout {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gx);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ── LEFT STICKY COL ── */
.cs-left {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cs-nav { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--ink-10); }

.cs-nav__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-10);
  display: flex; flex-direction: column; gap: 2px;
}

.cs-nav__num { font-size:9px; letter-spacing:.06em; color:var(--ink-25); }
.cs-nav__label {
  font-size:10.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-50); transition:color .2s; cursor:pointer;
}
.cs-nav__item.active .cs-nav__label { color:var(--ink); }
.cs-nav__item:hover .cs-nav__label { color:var(--ink); }

/* ── RIGHT SCROLLABLE COL ── */
.cs-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── EACH SECTION INSIDE RIGHT ── */
.cs-section {
  padding-block: 64px;
  border-top: 1px solid var(--ink-10);
}

.cs-section:first-child { border-top: none; padding-top: 0; }

/* Numbered section header (Hazey style) */
.cs-section__top {
  margin-bottom: 36px;
}

.cs-section__meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}

.cs-section__num {
  font-size: 10px; letter-spacing: .06em; color: var(--ink-25);
}

.cs-section__tag {
  font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-50);
}

.cs-section__head {
  font-family: var(--d);
  font-size: clamp(22px, 2.4vw, 34px);
  color: var(--ink); text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.05;
}

/* content */
.cs-section__content { display:flex; flex-direction:column; gap:20px; }

.cs-p {
  font-size: 14px; line-height: 1.85; color: var(--ink-50);
}

/* image grids */
.cs-img-1 { width:100%; overflow:hidden; }
.cs-img-1 .ph, .cs-img-1 img { width:100%; }

.cs-img-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%;
}
.cs-img-2 > * { width: 100%; overflow: hidden; }

.cs-img-3 {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; width: 100%;
}
.cs-img-3 > * { width: 100%; }

/* image + text side by side */
.cs-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
}

.cs-split__text { display:flex; flex-direction:column; gap:14px; }

/* ── PROJECT INDEX ── */
.cs-index {
  border-top: 0px solid var(--ink-10);
  padding-block: 56px;
}

.cs-index__list { border-top: 1px solid var(--ink-10); }

.cs-index__item {
  position: relative;
  display: grid; grid-template-columns: 52px 1fr 72px;
  align-items: center; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--ink-10);
  overflow: visible;
  cursor: default;
  transition: background .15s;
}

.cs-index__item:not(.cs-index__item--cur):hover .cs-index__num,
.cs-index__item:not(.cs-index__item--cur):hover .cs-index__year {
  color: var(--ink-50);
}

.cs-index__num  { font-size:10px; letter-spacing:.04em; color:var(--ink-25); transition: color .2s; }
.cs-index__name { font-size:13px; color:var(--ink-50); transition:color .15s; }
.cs-index__name a { transition:color .15s; }
.cs-index__name a:hover { color:var(--ink); }
.cs-index__year { font-size:10.5px; color:var(--ink-25); text-align:right; transition: color .2s; }
.cs-index__item--cur .cs-index__name { color:var(--ink); font-weight:500; }

/* ── FLOATING PREVIEW IMAGE ── */
.cs-index__preview {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  transform: translateX(-50%) translateY(10px) scale(.96);
  width: 280px;
  background: var(--paper);
  box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  overflow: hidden;
  z-index: 50;
  border-radius:8px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity  .28s cubic-bezier(.16,1,.3,1),
    transform .28s cubic-bezier(.16,1,.3,1);
}

.cs-index__item.is-hovered .cs-index__preview {
  opacity: 1;
  pointer-events: none;
  transform: translateX(-50%) translateY(120px) scale(1.8);
}

.cs-index__preview-img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.cs-index__preview-ph {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c8c4bc;
  font-family: var(--t);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.22);
}

.cs-index__preview-cap {
  padding: 8px 12px;
  font-family: var(--t);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-50);
  border-top: 1px solid var(--ink-10);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display:none;
}

/* ── LISTS ── */
.cs-ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.cs-li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-50);
}

.cs-li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-25);
}

/* Don't show preview on mobile – it collides with touch */
@media (hover: none) {
  .cs-index__preview { display: none; }
}

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .cs-h__grid { grid-template-columns:1fr; }
  .cs-layout { grid-template-columns:1fr; gap:0; padding-top:40px; }
  .cs-left { position:static; }
  .cs-nav { display:none; }
  .cs-full--parallax { height: 50vh; }
}

@media (max-width:600px) {
  .cs-img-2, .cs-img-3 { grid-template-columns:1fr; }
  .cs-split { grid-template-columns:1fr; }
  .cs-index__item { grid-template-columns:36px 1fr 56px; }
  .cs-full--parallax { height: 40vh; }
}

/* cs-nav items are now <a> tags */
a.cs-nav__item { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }