/* ──────────────────────────────────────────────
   PROOF — case study pages (/work/*)
   Builds on blog.css (tokens, nav, footer, .prose,
   .post-cta, .crumb, .idx-head, .btn-w). Adds the
   case-specific layout. Per-page accent via --acc.
   ────────────────────────────────────────────── */
:root { --acc: #D6FF3F; }

/* ── case header ── */
.case-kicker{
  font-family:var(--fm);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc);margin-bottom:18px;
  display:flex;align-items:center;gap:12px;
}
.case-kicker::before{content:'';width:26px;height:1px;background:var(--acc);opacity:.7}
.case-title{
  font-family:var(--fn);font-weight:360;
  font-size:clamp(38px,6vw,66px);line-height:1.0;letter-spacing:-.022em;
  text-wrap:balance;margin-bottom:18px;
  font-variation-settings:"opsz" 144;
}
.case-meta{font-family:var(--fm);font-size:12px;color:var(--g);letter-spacing:.02em;text-transform:uppercase}

/* ── full-bleed hero ── */
.case-hero{margin:36px 0 0}
.case-hero img{
  width:100%;height:clamp(300px,52vh,560px);object-fit:cover;display:block;
  filter:brightness(.92) contrast(1.02);
}

/* ── specs row ── */
.case-specs{
  display:flex;flex-wrap:wrap;gap:0;margin:0 0 8px;
  border-bottom:1px solid var(--line);
}
.spec{
  flex:1 1 auto;min-width:140px;
  padding:24px 22px 22px 0;margin-right:22px;
  display:flex;flex-direction:column;gap:8px;
}
.spec-l{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g2)}
.spec-v{font-family:var(--fn);font-weight:420;font-size:clamp(22px,2.6vw,30px);line-height:1;color:var(--acc);font-variation-settings:"opsz" 144}
.spec-v.sm{font-size:16px;color:var(--w);font-weight:440}

/* ── narrative ── */
.case-body{margin-top:44px}

/* ── what we handled ── */
.case-scope{
  margin:40px 0 8px;padding-top:28px;border-top:1px solid var(--line);
}
.cs-label{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:18px}
.case-scope ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
.case-scope li{
  font-family:var(--fb);font-size:15.5px;color:var(--w-dim);
  padding-left:20px;position:relative;line-height:1.4;
}
.case-scope li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--acc);border-radius:50%}
@media(max-width:560px){.case-scope ul{grid-template-columns:1fr}}

/* ── quote ── */
.case-quote{
  margin:48px 0 8px;padding:8px 0 8px 26px;border-left:2px solid var(--acc);
  font-family:var(--fn);font-weight:360;font-size:clamp(20px,2.6vw,26px);
  line-height:1.45;color:var(--w);letter-spacing:-.008em;
  font-variation-settings:"opsz" 40;
}
.case-quote cite{
  display:block;margin-top:16px;font-family:var(--fm);font-size:11px;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;color:var(--g);
}

/* ── gallery ── */
.case-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin:48px 0 8px}
.case-gallery figure{margin:0;overflow:hidden;background:var(--bg2)}
.case-gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.case-fig{margin:28px 0}
.case-fig img{width:100%;height:auto;border-radius:2px;display:block}
@media(max-width:640px){.case-gallery{grid-template-columns:1fr}}

/* ── work index grid ── */
.wx-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:3px;
  margin-top:clamp(32px,5vw,52px);
}
.wx-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--bg2);overflow:hidden;min-height:340px;
}
.wx-img{position:absolute;inset:0;z-index:0}
.wx-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.56) contrast(1.02);
  transition:filter .5s var(--ease-out),transform .7s var(--ease-out);
}
.wx-card:hover .wx-img img{filter:brightness(.82);transform:scale(1.04)}
.wx-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px;
  background:linear-gradient(transparent,rgba(20,20,20,.82));
}
.wx-tag{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.wx-title{font-family:var(--fn);font-weight:420;font-size:clamp(24px,3vw,32px);line-height:1.04;letter-spacing:-.015em;color:var(--w);margin:12px 0 8px;font-variation-settings:"opsz" 144}
.wx-meta{font-family:var(--fm);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--g)}
@media(max-width:680px){.wx-grid{grid-template-columns:1fr}}