/* A project is read through its work: full composition, context, detail, direction. */
.case-study{--case-gutter:4.5vw;--case-space:clamp(80px,9vw,175px);padding:0;overflow:clip}
.case-gutter{padding-inline:var(--case-gutter)}
.case-header{padding-top:clamp(145px,19svh,190px);padding-bottom:clamp(35px,4vw,75px)}
.case-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px}
.case-topline>span{font-size:12px;text-align:right}
.case-study .project-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,72px);margin:clamp(35px,6svh,70px) 0 30px}
.case-study .project-heading:not(:has(.case-website)){grid-template-columns:minmax(0,1fr)}
.case-study .project-heading h1{max-width:none;font-family:var(--musou-font-body);font-weight:500;font-size:clamp(72px,min(12.5vw,22svh),240px);line-height:.97;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.case-website{display:inline-flex;align-items:center;justify-self:end;gap:18px;min-height:44px;font-size:16px;line-height:1.4;white-space:nowrap}
.case-website-arrow{--footer-ink:var(--musou-ink);--footer-surface:var(--musou-page);width:clamp(52px,4.5vw,72px)}
.case-website:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.case-website:focus-visible .case-website-arrow{color:var(--musou-page);border-color:var(--musou-ink)}
@media(hover:hover) and (pointer:fine){.case-website:hover .case-website-arrow{color:var(--musou-page);border-color:var(--musou-ink)}}
@media(hover:none){.case-website:active .case-website-arrow{color:var(--musou-page);border-color:var(--musou-ink)}}
.case-header-summary{display:flex;justify-content:space-between;align-items:end;gap:6vw}
.case-header-summary>p{font-size:clamp(18px,1.6vw,28px);line-height:1.45;max-width:40ch}
.case-header-summary .case-demo-note{font-size:11px;line-height:1.5;max-width:30ch}
.case-study .project-cover{margin-inline:var(--case-gutter);height:clamp(320px,76svh,1050px);background:var(--musou-panel);overflow:hidden}
.case-study .project-cover img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:var(--case-focus,50% 50%)}
.case-study .project-cover .image-missing{display:grid;place-items:center;height:100%;padding:30px;font-size:clamp(25px,5vw,90px)}
.case-overview{padding-block:var(--case-space)}
.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:0 0 clamp(55px,7vw,130px);padding-block:22px;border-block:1px solid color-mix(in srgb,var(--musou-ink) 22%,transparent)}
.case-facts dt{font-size:11px;margin-bottom:12px}.case-facts dd{font-size:18px;margin:0;line-height:1.45;overflow-wrap:anywhere}
.case-story-row{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}
.case-heading{font-family:var(--musou-font-body);font-size:clamp(42px,5vw,96px);font-weight:500;line-height:1.06;letter-spacing:-.035em;max-width:15ch}
.case-story-copy{font-size:clamp(21px,1.7vw,32px);line-height:1.5;letter-spacing:-.018em;max-width:none}
.case-story-copy>p+p{margin-top:1.25em}
.case-story-row>.case-story-copy:only-child{grid-column:2}
.case-image-pair{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:end}
.case-supporting-image>div{height:clamp(360px,46vw,900px);overflow:hidden;background:var(--musou-panel)}
.case-supporting-image:nth-child(2)>div{height:clamp(300px,35vw,680px)}
.case-supporting-image img{width:100%;height:100%;object-fit:cover}
.case-supporting-image.is-detail-crop img{transform:scale(1.65);object-position:var(--detail-focus,50% 50%);transform-origin:var(--detail-focus,50% 50%)}
.case-supporting-image figcaption{font-size:11px;line-height:1.45;margin-top:15px}
.case-image-pair.has-one-image{display:block}.case-image-pair.has-one-image .case-supporting-image>div{height:clamp(320px,70svh,900px)}
.case-approach{padding-block:var(--case-space)}
.case-outcome{padding-block:clamp(70px,7vw,135px) var(--case-space);border-top:1px solid color-mix(in srgb,var(--musou-ink) 22%,transparent)}
.case-outcome .case-heading{font-size:clamp(54px,8vw,154px);max-width:18ch}
.case-outcome .case-story-copy{margin-top:clamp(35px,5vw,85px);margin-left:calc(50% + 4vw)}
.case-next{border-top:1px solid color-mix(in srgb,var(--musou-ink) 22%,transparent);padding-top:clamp(36px,4vw,75px)}
.case-next-link{display:block}.case-next-heading{padding-bottom:clamp(25px,3vw,55px)}
.case-next-caption{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-bottom:25px}
.case-next-title{display:flex;align-items:center;justify-content:space-between;gap:4vw}
.case-next-title h2{font-size:clamp(55px,min(9vw,18svh),175px);font-family:var(--musou-font-body);font-weight:500;line-height:1;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.case-next-title>.case-next-arrow{--footer-ink:var(--musou-ink);--footer-surface:var(--musou-page);width:clamp(64px,7vw,128px);flex:none}
.case-next-link:focus-visible .case-next-arrow{color:var(--musou-page);border-color:var(--musou-ink)}
.case-next-image{height:clamp(270px,62svh,900px);overflow:hidden;background:var(--musou-panel);position:relative}
.case-next-image img{width:100%;height:100%;object-fit:cover;object-position:var(--case-focus,50% 50%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.case-next-missing{display:grid;height:100%;place-items:center;font-size:clamp(30px,5vw,90px)}
.case-return{padding-bottom:var(--case-space)}
.case-next-link:focus-visible{outline:0}.case-next-link:focus-visible .case-next-title h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.1em}
@media(hover:hover) and (pointer:fine){.case-next-link:hover .case-next-image img{transform:scale(1.035)}.case-next-link:hover .case-next-arrow{color:var(--musou-page);border-color:var(--musou-ink)}}
@media(max-width:900px){.case-story-row{gap:6vw}.case-heading{font-size:clamp(38px,5.5vw,60px)}.case-story-copy{font-size:23px}.case-image-pair{gap:5vw}}
@media(max-width:700px){
 .case-study{--case-gutter:5vw;--case-space:75px}.case-header{padding-top:150px;padding-bottom:30px}.case-topline{font-size:12px}.case-topline>span{font-size:14px;font-weight:500;line-height:1.4;max-width:35%}
 .case-study .project-heading{grid-template-columns:minmax(0,1fr);gap:24px;margin:40px 0 25px}.case-study .project-heading h1{font-size:clamp(58px,15.5vw,105px);line-height:1}
 .case-website{font-size:14px;gap:14px}.case-website-arrow{width:44px}
 .case-header-summary{display:block}.case-header-summary>p{font-size:19px;max-width:32ch}.case-header-summary .case-demo-note{margin-top:20px;font-size:10px;max-width:none}
 .case-study .project-cover{height:auto;aspect-ratio:4/3}.case-facts{gap:25px 15px;grid-template-columns:repeat(2,1fr);margin-bottom:45px}.case-facts dd{font-size:16px}
 .case-story-row{display:block}.case-heading{font-size:11.5vw;max-width:17ch;line-height:1.08}.case-story-copy{font-size:22px;line-height:1.5;margin-top:28px}
 .case-image-pair{grid-template-columns:1fr 1fr;gap:5vw;align-items:start}.case-supporting-image>div{height:68vw;min-height:0}.case-supporting-image:nth-child(2){margin-top:28vw}.case-supporting-image:nth-child(2)>div{height:53vw;min-height:0}.case-supporting-image figcaption{font-size:9px;margin-top:12px}
 .case-outcome{padding-top:60px}.case-outcome .case-heading{font-size:13.5vw;max-width:15ch}.case-outcome .case-story-copy{margin-left:0;margin-top:30px}
 .case-next{padding-top:35px}.case-next-heading{padding-bottom:25px}.case-next-caption{font-size:10px;margin-bottom:22px}.case-next-title h2{font-size:12.2vw;line-height:1.03}.case-next-title>.case-next-arrow{width:48px}.case-next-image{height:54svh;min-height:250px;max-height:600px}
}
/* Keep part of the landing image in view on short desktop windows. */
@media(max-width:1099px){.case-topline>span{font-size:14px;font-weight:500;line-height:1.4}}
@media(min-width:701px) and (max-height:650px){
 .case-header{padding-top:110px;padding-bottom:24px}
 .case-study .project-heading{margin:24px 0 20px}
 .case-study .project-heading h1{font-size:clamp(64px,min(10.5vw,17svh),110px)}
 .case-header-summary>p{font-size:18px;line-height:1.45}
 .case-header-summary .case-demo-note{font-size:10px}
}
@media(hover:none){.case-next-link:active .case-next-arrow{color:var(--musou-page);border-color:var(--musou-ink)}}
@media(prefers-reduced-motion:reduce){.case-next-image img{transition:none!important}.case-next-link:hover .case-next-image img{transform:none}}
.case-study .project-cover.is-natural{height:auto;aspect-ratio:auto}
.case-study .project-cover.is-natural{background:transparent}
.case-study .project-cover.is-natural img{display:block;width:auto;max-width:min(100%,var(--project-media-width,1440px));height:auto;max-height:min(76svh,900px);object-fit:contain;margin-inline:auto}
@media print{.case-next{display:none}.case-study .project-cover,.case-supporting-image>div{height:auto}.case-study .project-cover img,.case-supporting-image img{height:auto;transform:none!important}}