/* Case-study pages — extends site.css. Chapter language carried into a
   long-form page: same tokens, same mono "exhibition label" voice. */

.case-hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;
  padding:140px 0 clamp(48px,7vh,88px);background:var(--deep);overflow:hidden;isolation:isolate}
.case-hero>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55}
.case-hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,7,5,.94) 0%,rgba(8,7,5,.86) 40%,rgba(8,7,5,.60) 100%)}
.case-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);align-items:end;color:var(--paper)}
.case-hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3rem,8vw,7rem);line-height:.86;letter-spacing:.01em;margin-top:6px}
.case-hero .dek{font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.5;margin-top:20px;
  max-width:38ch;color:rgba(252,251,248,.88)}
.case-hero .device{margin-bottom:-6px}

.case-section{padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid var(--rule)}
.case-section.alt{background:#f6f3ec}
.case-col{max-width:62ch}
.kicker{color:var(--muted);margin-bottom:22px}
.case-section p{font-size:1.1875rem;line-height:1.65}
.case-section p+p{margin-top:18px}

.does{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,48px)}
.does li{border-top:2px solid var(--ink);padding-top:18px}
.does h3{font-family:var(--display);font-size:2rem;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.does p{margin-top:10px;font-size:1.0625rem;color:var(--ink)}

.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
.shot .phone{border-radius:30px;padding:7px;background:linear-gradient(150deg,#3a3730,#0c0b08 55%);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.55),0 0 0 1px rgba(23,21,15,.10)}
.shot .phone img{width:100%;height:auto;aspect-ratio:1320/2868;object-fit:cover;object-position:top;border-radius:24px;display:block}
.shot figcaption{margin-top:12px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  color:var(--muted);line-height:1.45}

.facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 32px}
.facts-grid .fact{padding:14px 0;border-bottom:1px solid var(--rule)}
.facts-grid dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.facts-grid dd{margin-top:6px;font-size:1.0625rem}

.case-close{background:var(--deep-2);color:var(--paper);padding:clamp(56px,8vw,104px) 0}
.case-close h2{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.5rem);line-height:.9;text-transform:uppercase}
.case-close p{margin-top:16px;max-width:52ch;font-size:1.0625rem;line-height:1.6;color:rgba(252,251,248,.78)}
.case-close .ch-cta{margin-top:28px}

@media(max-width:960px){
  .case-hero-grid{grid-template-columns:1fr}
  .case-hero .device{order:-1;max-width:220px;margin:0 0 22px}
  .does{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts-grid{grid-template-columns:1fr}
}