/* ============================================================
   Caseside — /work/<slug> (case.html). Fase 1 av magasinmodellen:
   hvert samarbeid som eget, delbart oppslag. Gjenbruker tokens/site/
   home (resultater, galleri, lenker); her bor kun sidespesifikke deler.
   ============================================================ */

.cp-head{max-width:880px;margin:0 auto;padding:clamp(140px,18vh,200px) var(--pad) clamp(36px,5vw,60px);text-align:center}
.cp-back{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin-bottom:26px;transition:color .3s ease}
.cp-back:hover{color:var(--midnight-deep)}
.cp-head .eyebrow{display:block;margin-bottom:14px}
.cp-title{font-family:var(--display);font-weight:500;font-size:clamp(38px,6.5vw,80px);line-height:1.04;letter-spacing:.01em;text-transform:uppercase}
.cp-title em{font-style:italic;font-weight:400;color:var(--midnight-deep);text-transform:none}
.cp-dek{font-size:16px;font-weight:300;line-height:1.7;max-width:60ch;margin:18px auto 0;color:#3A342E}

/* Hero: full bredde, høyden følger bildet (normalt beskåret mot 21:10-ish),
   utsnittet følger prosjektets bildeutsnitt-valg via --focus */
.cp-hero{max-width:1520px;margin:0 auto;padding:0 var(--pad)}
.cp-hero .frame{position:relative;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(150deg,#EADFD2,#D9C2A6 55%,#B99269)}
.cp-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 25%)}
@media(max-width:840px){.cp-hero .frame{aspect-ratio:4/5}}

.cp-body{max-width:880px;margin:0 auto;padding:clamp(28px,4vw,48px) var(--pad) 0;text-align:center}
.cp-body .case-results{justify-content:center;border-top:none;padding-top:0}
.cp-ig{margin-top:26px}

.cp-gallery{max-width:1520px;margin:0 auto;padding:clamp(36px,5vw,64px) var(--pad) 0}

.cp-more{max-width:1520px;margin:0 auto;padding:clamp(56px,8vw,100px) var(--pad) 0}
.cp-more .h2{margin:6px 0 clamp(24px,3.5vw,40px)}
.cp-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.cp-more-grid a{display:block}
.cp-more-grid .thumb{position:relative;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(150deg,#E9E2D8,#CDBBA4 55%,#9E8467)}
.cp-more-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.19,1,.22,1)}
.cp-more-grid a:hover img{transform:scale(1.05)}
.cp-more-grid .eyebrow{display:block;margin:14px 0 6px}
.cp-more-grid b{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.8vw,22px);line-height:1.15}
@media(max-width:840px){.cp-more-grid{grid-template-columns:1fr;gap:26px}}

.cp-cta{text-align:center;padding:clamp(70px,10vw,130px) var(--pad)}
.cp-cta .btn{margin-top:26px}

.cp-missing{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--pad) 60px}
.cp-missing .cp-dek{margin-bottom:30px}