/* Cases / portfolio pages. Builds on assets/base.css */

.site-header{color:var(--ink)}

.page{padding:110px var(--pad) 0}
.page-head{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;margin-bottom:28px}
.page-title{font-family:var(--sans);font-weight:500;font-size:clamp(54px,8vw,118px);line-height:.92;letter-spacing:-.05em;margin:0 0 18px;max-width:14ch}
.page-title em{font-family:var(--editorial);font-style:italic;font-weight:400;letter-spacing:-.035em}
.page-lede{color:var(--smoke);font-size:clamp(15px,1.05vw,18px);line-height:1.5;letter-spacing:-.01em;max-width:42ch;margin:0 0 56px}

.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(14px,2vw,22px);padding-bottom:100px}
.case-card{display:block;color:inherit}
.case-card figure{overflow:hidden;background:#d7d8d2;aspect-ratio:4/5;box-shadow:0 0 0 1px rgba(32,33,29,.08)}
.case-card img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.case-card:hover img{transform:scale(1.03)}
.case-card-meta{display:flex;justify-content:space-between;gap:12px;padding-top:10px}
.case-card-name{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.035em;line-height:1.05;margin:8px 0 0}

.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px}
.crumb a{opacity:.72}.crumb a:hover{opacity:1}.crumb span[aria-hidden]{opacity:.4}

.case-hero{margin:0 calc(-1 * var(--pad));overflow:hidden;background:#d7d8d2;max-height:78svh}
.case-hero figure{aspect-ratio:16/10;max-height:78svh}
.case-hero img{object-position:center 45%}

.case-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);padding:56px 0 64px;border-bottom:1px solid var(--line)}
.case-intro h1{font-family:var(--sans);font-weight:500;font-size:clamp(48px,6.5vw,96px);line-height:.92;letter-spacing:-.045em;margin:12px 0 22px}
.case-intro p{color:var(--smoke);font-size:clamp(15px,1.05vw,18px);line-height:1.55;letter-spacing:-.01em;max-width:42ch;margin:0}
.case-facts{display:grid;gap:18px;align-content:start;padding-top:8px}
.case-facts dt{font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.72;margin:0 0 4px}
.case-facts dd{margin:0;font-size:15px;letter-spacing:-.01em}

.case-gallery{padding:64px 0 40px;display:grid;gap:clamp(14px,2vw,22px)}
.case-gallery .pair{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(14px,2vw,22px);align-items:end}
.case-gallery .pair.reverse{grid-template-columns:.85fr 1.15fr}
.case-gallery .pair figure{overflow:hidden;background:#d7d8d2}
.case-gallery .pair .tall{aspect-ratio:3/4}
.case-gallery .pair .wide{aspect-ratio:4/5}
.case-gallery .full{overflow:hidden;background:#d7d8d2;aspect-ratio:16/10}
.case-gallery .solo{overflow:hidden;background:#d7d8d2;aspect-ratio:3/4;width:min(100%,520px)}

.case-foot{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:48px 0 28px;border-top:1px solid var(--line);margin-top:28px}
.case-next{font-family:var(--sans);font-weight:500;font-size:clamp(28px,3.5vw,48px);letter-spacing:-.04em;line-height:1.05}
.case-next span{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.72;font-weight:500;margin-bottom:8px}
.case-next em{font-family:var(--editorial);font-style:italic;font-weight:400}
.enquire-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px;opacity:.85}
.enquire-link:hover{opacity:1}

.site-footer{display:grid;grid-template-columns:1fr 1fr 1fr;padding:40px 0 48px;border-top:1px solid var(--line);margin-top:40px}
.site-footer span:last-child{justify-self:end}

@media(max-width:820px){
  :root{--pad:16px}
  .site-header{grid-template-columns:1fr;padding:15px var(--pad);font-size:11px}.cta{display:none}.nav{display:flex;justify-content:center;gap:24px;font-size:10px;font-weight:500;letter-spacing:.075em;text-transform:uppercase}.nav-desktop{display:none}.nav-mobile{display:inline}
  .page{padding-top:92px}
  .page-title{font-size:clamp(48px,13vw,72px)}
  .cases{grid-template-columns:1fr;gap:36px 0;padding-bottom:72px}
  .case-hero figure{aspect-ratio:4/5;max-height:70svh}
  .case-intro{grid-template-columns:1fr;gap:32px;padding:40px 0 48px}
  .case-gallery .pair,.case-gallery .pair.reverse{grid-template-columns:1fr}
  .case-gallery .solo{width:100%}
  .case-foot{grid-template-columns:1fr;gap:28px;align-items:start}
  .site-footer{grid-template-columns:1fr 1fr;gap:12px}
  .site-footer span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .case-card img{transition:none!important}
}