/* =========================================================================
   LILY BISSET — Case Studies index (interior page)
   case.css — depends on styles.css for tokens, nav, footer, grain
              and on work.css for the .work-modal + .workhead visual cluster
   ========================================================================= */

/* ---- hero title: two-line CASE / STUDIES --------------------------------- */
.workhead__title.is-case{
  font-size:clamp(56px,11vw,176px);line-height:.84;
}
.workhead__title.is-case .l2{color:var(--pink);}

/* ---- count bar (no filter / no sort) ------------------------------------- */
.casebar{
  position:sticky;top:0;z-index:50;
  background:var(--paper);color:var(--ink);
  border-bottom:2px solid #000;
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  padding:clamp(14px,1.5vw,20px) var(--pad);
}
.casebar__mark{display:flex;align-items:center;gap:6px;flex:none;}
.casebar__mark i{width:11px;height:11px;display:block;background:var(--ink);}
.casebar__mark i:first-child{background:var(--pink);}
.casebar__label{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(11px,0.92vw,13px);
  letter-spacing:.2em;text-transform:uppercase;color:#5a564d;
}
.casebar__label b{color:var(--ink);}
.casebar__spacer{flex:1;}
.casebar__meta{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(11px,0.9vw,12.5px);
  letter-spacing:.18em;text-transform:uppercase;color:#5a564d;
}
.casebar__meta b{color:var(--pink);font-weight:700;}

/* ---- case list ----------------------------------------------------------- */
.caselist{
  background:var(--paper);color:var(--ink);
  padding:0 var(--pad) clamp(40px,5vw,90px);
}

.caserow{
  display:grid;
  grid-template-columns:clamp(220px,30vw,380px) auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(20px,2.6vw,48px);
  width:100%;text-align:left;padding:clamp(26px,3vw,46px) 0;
  background:transparent;border:0;border-bottom:1.5px solid #c5c0b3;
  color:inherit;font:inherit;cursor:pointer;
  transition:padding-left .28s cubic-bezier(.2,.7,.2,1);
}
.caserow:first-child{border-top:2px solid #000;}
.caserow:hover{padding-left:clamp(6px,0.9vw,14px);}
.caserow:focus-visible{outline:3px solid var(--pink);outline-offset:4px;}

/* thumbnail */
.caserow__media{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:#000;border:2px solid #000;
}
.caserow__media img{
  width:100%;height:100%;object-fit:cover;object-position:left top;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.caserow:hover .caserow__media img{transform:scale(1.05);}

/* big index number */
.caserow__num{
  font-family:var(--font-display);color:var(--pink);
  font-size:clamp(34px,4vw,64px);line-height:.8;letter-spacing:.01em;
  align-self:start;padding-top:.06em;
}

/* body */
.caserow__body{min-width:0;}
.caserow__title{
  font-family:var(--font-head);font-weight:800;font-stretch:condensed;
  text-transform:uppercase;line-height:.94;letter-spacing:-.01em;
  font-size:clamp(26px,2.9vw,46px);margin:0;color:var(--ink);text-wrap:balance;
}
.caserow__blurb{
  font-family:var(--font-mono);font-size:clamp(12px,0.95vw,14.5px);line-height:1.55;
  color:#4a463e;margin:.85em 0 0;max-width:48ch;text-wrap:pretty;
}
.caserow__tags{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(14px,1.5vw,20px) 0 0;}
.caserow__tags span{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#33312c;border:1.5px solid #b4afa2;
  padding:.5em .7em;line-height:1;
}

/* chevron */
.caserow__arrow{
  flex:none;color:var(--ink);width:clamp(30px,3vw,46px);height:auto;
  transition:transform .24s ease,color .24s ease;align-self:center;
}
.caserow:hover .caserow__arrow{transform:translateX(7px);color:var(--pink);}
.caserow__arrow svg{width:100%;height:auto;display:block;}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:880px){
  .topnav nav{display:none;}
  .workhead__checkers{display:none;}
  .workhead__year{display:none;}
}
@media (max-width:760px){
  .caserow{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "num media"
      "body body";
    gap:16px clamp(14px,3vw,22px);
    align-items:center;
  }
  .caserow__media{grid-area:media;}
  .caserow__num{grid-area:num;align-self:center;padding-top:0;}
  .caserow__body{grid-area:body;}
  .caserow__arrow{display:none;}
}
@media (max-width:560px){
  .workhead__squigs{display:none;}
  .casebar{gap:10px;}
}

/* =========================================================================
   CASE DETAIL — text-focused, no imagery (overrides work.css split modal)
   ========================================================================= */
.work-modal__img{display:none;}
.work-modal__split{grid-template-columns:1fr;}
.work-modal__col{
  border-right:0;width:100%;max-width:1180px;margin:0 auto;
}
.work-modal__title{max-width:24ch;}

.cs-detail{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr);
  gap:clamp(30px,4.5vw,80px);
  margin-top:clamp(28px,3.4vw,48px);
  align-items:start;
}
.cs-detail__main{min-width:0;display:flex;flex-direction:column;gap:clamp(26px,2.8vw,42px);}
.cs-detail__rail{min-width:0;position:sticky;top:0;}

/* section blocks */
.cs-sec h3{
  font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pink);margin:0 0 .95em;
  display:flex;align-items:center;gap:.7em;
}
.cs-sec h3::before{content:"";width:20px;height:2px;background:var(--pink);flex:none;}
.cs-sec p{
  font-family:var(--font-mono);font-size:clamp(13px,1vw,15px);line-height:1.78;
  color:#d0cbc0;margin:0;text-wrap:pretty;
}

/* My Role — wider lead paragraph above the grid */
.cs-sec--lead{
  border-left:2px solid var(--pink);padding-left:clamp(18px,2vw,28px);
  margin-bottom:clamp(8px,1vw,14px);
}
.cs-sec--lead p{
  font-family:var(--font-mono);font-size:clamp(15px,1.25vw,19px);line-height:1.62;
  color:#efeae0;max-width:70ch;
}

/* scorecard */
.cs-score{border:1.5px solid #2c2b27;background:#100f0e;}
.cs-score__head{
  font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
  padding:clamp(13px,1.4vw,17px) clamp(16px,1.6vw,22px);
  border-bottom:1.5px solid #2c2b27;display:flex;align-items:center;gap:.7em;
}
.cs-score__head i{width:.62em;height:.62em;background:var(--pink);display:block;
  animation:pulse 1.6s ease-in-out infinite;}
.cs-stat{padding:clamp(18px,1.9vw,24px) clamp(16px,1.6vw,22px);}
.cs-stat + .cs-stat{border-top:1px solid #2c2b27;}
.cs-stat .num{
  font-family:var(--font-display);font-size:clamp(36px,3.4vw,54px);
  color:var(--pink);line-height:.92;letter-spacing:.01em;
}
.cs-stat span{
  display:block;margin-top:.6em;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#9c968a;line-height:1.42;
}

.cs-detail--no-rail{grid-template-columns:1fr;}
.cs-sec--sources p{
  font-size:clamp(10px,0.78vw,12px);color:#6b6860;line-height:1.55;margin-top:.5em;
}

@media (max-width:820px){
  .cs-detail{grid-template-columns:1fr;gap:clamp(26px,5vw,40px);}
  .cs-detail__rail{position:static;}
}