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

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

.case-page .case-opening .case-hero-media iframe{display:block;width:100%;height:100%;aspect-ratio:auto;border:0;background:transparent}

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

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

/* Outer summary aligns with the cover's left edge. */
.case-outer .project-overview{grid-template-columns:minmax(0,1fr)}
.case-outer .project-overview > .project-summary{grid-column:1;width:100%;max-width:800px;text-align:left}

/* Preserve the full width of Outer's interface collection. */
.case-outer .case-opening .case-hero-media{aspect-ratio:2400/1219;height:auto;min-height:0;background:#fff}
.case-outer .case-opening .case-hero-media img{width:100%;height:auto;aspect-ratio:2400/1219;object-fit:contain}

/* Pure white canvas throughout project pages. */
html:not([data-theme=dark]) body.case-page{background:#fff;--portfolio-background:#fff}
html:not([data-theme=dark]) .case-page :is(.page-root,#main,.case-footer,.case-next,.next-panel-overlay,.case-sidebar,.case-lightbox){background:#fff}
html:not([data-theme=dark]) .case-page .portfolio-header::before{background:rgba(255,255,255,.72)}

/* A consistent narrative rhythm for the Outer case study. */
.outer-story-copy p + p{margin-top:20px}
.outer-story-media{margin:40px 0 0!important;scroll-margin-top:120px}
.outer-story-media img,.outer-story-media video{display:block;width:100%;height:auto;border-radius:20px}
.outer-story-media figcaption{font:400 13px/1.5 'PP Neue Montreal',sans-serif;color:#777570;margin-top:14px;max-width:640px}
.case-outer .case-sidebar nav{max-height:60vh;overflow:auto}
@media(max-width:809px){.case-outer .case-sidebar nav{max-height:none}.outer-story-copy p + p{margin-top:16px}}

/* Outer narrative: quiet labels, focused reading column, then supporting evidence. */
.case-outer .outer-story-section{display:grid;grid-template-columns:140px minmax(0,1fr);gap:36px;align-items:start;padding-top:80px}
.case-outer .outer-story-section>.case-eyebrow{font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;color:#858580;margin:7px 0 0}
.case-outer .outer-story-content{max-width:760px}
.case-outer .outer-story-content>h2{font-family:'PP Neue Montreal',sans-serif!important;font-size:clamp(26px,2.6vw,38px);line-height:1.18;letter-spacing:-.025em;font-weight:400;margin:0 0 26px}
.case-outer .outer-story-copy{font-size:17px;line-height:1.65;color:#62625e}
.case-outer .outer-story-copy p{font-size:inherit;line-height:inherit}
.outer-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:36px 0 0}
.outer-goal h3,.outer-detail-list h3{font-family:'PP Neue Montreal',sans-serif!important;font-size:21px;font-weight:500;line-height:1.3;letter-spacing:-.02em;margin:14px 0 12px}
.outer-goal p{font-size:15px;line-height:1.6;color:#73736d}.outer-goal small{display:block;font-size:12px;color:#777;margin-top:14px}
.outer-goal-dots{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;place-items:center;background:#f9f8f3;border-radius:20px;padding:30px 24px;margin-top:24px}
.outer-goal-dots i{width:14px;height:14px;border-radius:50%;background:#e5e2dc}.outer-goal-dots--control i:nth-child(3n){background:#ce5541}.outer-goal-dots--progress i:nth-child(-n+17){background:#dfb166}.outer-goal-dots--personal i:nth-child(2n){background:#8884e8}.outer-goal-dots--personal i:nth-child(5n){background:#ce5541}
.case-outer #north-star{border-top:1px solid #eee;margin-top:70px;padding-bottom:48px}.case-outer #north-star h2{font-size:clamp(34px,4vw,56px);max-width:620px;color:#bd503d}
.outer-process-study{margin:40px 0 0}.outer-flow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:24px 0 32px;font-size:14px}.outer-flow b{font-weight:400;color:#aaa}.outer-flow span{padding:10px 16px;border-radius:30px;background:#f4f3ef}
.outer-wireframes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;background:#f9f8f5;padding:30px;border-radius:20px}
.outer-wireframe{display:flex;flex-direction:column;gap:18px;border:1px solid #cbc9c1;border-radius:22px;padding:22px 16px;background:white;min-height:350px;font-size:12px;color:#72726c}.outer-wireframe small{font-size:10px;text-transform:uppercase;letter-spacing:.07em}.outer-wireframe h3{font:400 23px/1.2 'PP Neue Montreal',sans-serif!important;margin:0;color:#444}
.wire-state{display:flex;align-items:center;gap:8px}.wire-state i{width:8px;height:8px;border-radius:50%;background:#999}.wire-timer{padding:18px 12px;background:#f5f4f1;border-radius:12px;line-height:1.6}.wire-timer strong{font-weight:400;color:#41413e}.wire-options{display:flex;gap:6px;flex-wrap:wrap}.wire-options span{border:1px solid #ddd;border-radius:20px;padding:7px}.wire-bar{margin-top:auto;border-radius:10px;background:#e9e8e3;padding:12px;font-size:10px}.wire-chart{height:68px;display:flex;gap:7px;align-items:end}.wire-chart i{flex:1;background:#cfcdc5;border-radius:3px}.wire-message{border:1px solid #e3e2dd;padding:12px;border-radius:12px;max-width:90%}.wire-message--reply{align-self:end;background:#f2f1ee}
.outer-process-study figcaption{font-size:12px;line-height:1.5;color:#858580;max-width:680px;margin-top:16px}
.outer-detail-list{display:grid;gap:22px;margin-top:32px;padding-top:8px}.outer-detail-list>div{border-top:1px solid #e9e8e4;padding-top:4px}.outer-detail-list h3{font-size:18px;color:#343430;margin-bottom:8px}.outer-detail-list p{font-size:15px!important}
@media(max-width:1000px){.case-outer .outer-story-section{grid-template-columns:110px minmax(0,1fr);gap:24px}.outer-wireframes{gap:12px;padding:16px}.outer-wireframe{padding:18px 12px}.outer-goal-dots{gap:10px;padding:24px 16px}}
@media(max-width:650px){.case-outer .outer-story-section{grid-template-columns:1fr;gap:18px;padding-top:56px}.case-outer .outer-story-content>h2{font-size:29px}.outer-goals,.outer-wireframes{grid-template-columns:1fr}.outer-goals{gap:36px}.outer-goal-dots{grid-template-columns:repeat(12,1fr);padding:24px}.outer-flow{flex-wrap:wrap;justify-content:start;font-size:12px}.outer-flow span{padding:8px 10px}.outer-wireframe{min-height:320px}.case-outer #north-star{margin-top:48px}.outer-detail-list{gap:18px}}
.outer-goal{display:flex;flex-direction:column}.outer-goal h3{min-height:2.6em}.outer-goal>p{flex:1}.outer-goal small{min-height:2.8em}
@media(max-width:650px){.outer-goal h3,.outer-goal small{min-height:0}}