/* Cover-led SharkNinja case study, using the portfolio's native sans faces. */
body.case-shark{font-family:var(--portfolio-font-body)}
html body.case-shark :is(h1,h2,h3,h4,h5,h6),html body.case-shark :is(h1,h2,h3,h4,h5,h6) *{font-family:var(--portfolio-font-heading)!important;font-weight:500!important}
.case-shark .case-opening{width:100%;max-width:none;padding:112px 40px 0}
.case-shark .case-opening .case-hero-media{margin:0;border-radius:var(--portfolio-radius);height:calc(100svh - 136px);min-height:320px;background:var(--case-tint)}
.case-shark .case-opening .case-hero-media :is(img,video){height:100%;width:100%;aspect-ratio:auto;object-fit:contain;border-radius:0}
.shark-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;padding:48px 0 64px;border-bottom:1px solid #deddd9}
.case-shark .case-opening-label{font:400 14px/1.4 var(--portfolio-font-body);background:none;padding:0;color:#777;border-radius:0}
.case-shark .case-opening h1{font:500 clamp(26px,2.5vw,40px)/1.15 var(--portfolio-font-heading);letter-spacing:-.035em;margin:14px 0 0;max-width:480px}
.case-shark .case-opening-subtitle{font:400 16px/1.5 var(--portfolio-font-body);max-width:none;columns:2;column-gap:36px}
.case-shark .case-opening .case-meta{grid-template-columns:1fr 1.25fr .75fr;border:0;padding:0;margin:32px 0 0;gap:24px}
.case-shark .case-meta dt{font-size:12px;letter-spacing:.08em}
.case-shark .case-meta dd{font-size:16px;line-height:1.4}
.case-shark .case-editorial p{font-family:var(--portfolio-font-body);font-size:18px;line-height:1.55}
.case-shark .case-statement h2{font-family:var(--portfolio-font-heading)}
@media(min-width:1600px){.case-shark .case-opening{padding-inline:clamp(40px,3.2vw,80px)}}
@media(max-width:1100px){.shark-overview{gap:32px;grid-template-columns:1fr 1.7fr}.case-shark .case-opening-subtitle{columns:auto}}
@media(max-width:809px){.case-shark .case-opening{padding:88px 20px 0}.case-shark .case-opening .case-hero-media{height:calc(78svh - 88px);min-height:280px}.shark-overview{grid-template-columns:1fr;gap:28px;padding:28px 0 40px}.case-shark .case-opening h1{font-size:30px!important;margin:12px 0 0}.case-shark .case-opening-subtitle{font-size:16px}.case-shark .case-opening .case-meta{grid-template-columns:1fr 1fr;gap:24px}.case-shark .case-meta dd{font-size:16px}}

/* Frameless moving cover. */
.case-shark .case-opening .case-hero-media,.case-shark .case-opening .case-hero-media :is(img,video){background:transparent;border:0;box-shadow:none}
.case-shark .case-opening .case-hero-media video{pointer-events:none}

/* Match the header gutters and fill the cover without inset letterboxing. */
.case-shark .case-opening{max-width:1600px;margin-inline:auto;padding-inline:var(--portfolio-gutter)}
.case-shark .case-opening .case-hero-media :is(img,video){object-fit:cover}
@media(max-width:809px){.case-shark .case-opening{padding-inline:14px}}

/* Project heading precedes the cover; supporting information remains below. */
.case-shark .case-opening > .shark-title{padding:24px 0 36px}
.case-shark .case-opening > .shark-title h1{max-width:850px}
.shark-overview > .shark-summary{grid-column:2}
@media(max-width:809px){.case-shark .case-opening > .shark-title{padding:20px 0 28px}.shark-overview > .shark-summary{grid-column:1}}