.case{--case-top: 100px;--case-gap: var(--gutter);--case-big: clamp(64px, 11vw, 220px);--case-ratio: .25;--case-title-top: var(--case-top);timeline-scope:--case-split}.case-hero{position:relative;height:100svh}.case-stage{position:relative;height:100svh;overflow:hidden}.case-hero-media{position:absolute;top:0;right:0;bottom:0;left:0;background:#111}.case-hero-media img{width:100%;height:100%;object-fit:cover}.case-hero-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#00000052,#0000 22%),linear-gradient(to top,#0000006b,#0000 42%);pointer-events:none}.case-hero-kicker,.case-hero-hint{position:absolute;top:var(--case-top);margin:0;font-size:13px;color:#fff}.case-hero-kicker{left:var(--case-gap)}.case-hero-hint{right:var(--case-gap)}.case-hero-title,.case-title{margin:0;font-weight:600;line-height:.9;letter-spacing:-.06em;white-space:nowrap;color:var(--ink, #111)}.case-hero-title{position:absolute;top:var(--case-title-top);left:var(--case-gap);font-size:var(--case-big);transform-origin:0 0;transform:translateY(calc(100svh - var(--case-title-top) - 1.6 * var(--case-gap) - .9 * var(--case-big)))}.case-hero-title.is-light{color:#fff}.case-split{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);column-gap:var(--case-gap);padding:0 var(--case-gap) 160px;background:var(--surface, #fff);view-timeline-name:--case-split;view-timeline-inset:0}.case-aside-inner{position:sticky;top:0;padding-top:var(--case-top)}.case-title{font-size:calc(var(--case-big) * var(--case-ratio))}.case-title>span{display:block}.case-lead{margin:36px 0 0;max-width:400px;font-size:clamp(17px,1.35vw,22px);line-height:1.4;letter-spacing:-.015em;color:var(--ink, #111)}.case-facts{display:grid;margin:40px 0 0;border-top:1px solid var(--line, #d4d4d4);font-size:13px}.case-facts>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line, #d4d4d4)}.case-facts dt{color:var(--muted, #666)}.case-facts dd{margin:0}.case-live{display:inline-flex;align-items:baseline;gap:6px;margin:28px 0 0;padding-bottom:4px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink, #111);background:linear-gradient(currentColor,currentColor) 0 100% / 0 1.5px no-repeat,linear-gradient(var(--line, #d4d4d4),var(--line, #d4d4d4)) 0 100% / 100% 1px no-repeat;transition:background-size .6s var(--ease-studio, ease)}.case-live>.arrow{display:inline-block;transition:transform .4s var(--ease-studio, ease)}.case-live:hover,.case-live:focus-visible{background-size:100% 1.5px,100% 1px}.case-live:hover>.arrow{transform:translate(2px,-2px)}.case-note{margin:24px 0 0;max-width:340px;font-size:12px;line-height:1.6;color:var(--muted, #666)}.case-gallery{display:grid;gap:var(--case-gap);padding-top:var(--case-top);min-width:0}.case-row{display:grid;gap:var(--case-gap)}.case-row.is-pair{grid-template-columns:1fr 1fr}.case-figure{position:relative;margin:0;overflow:hidden;aspect-ratio:16 / 10;background:var(--surface-soft, #f1f1f1)}.is-pair .case-figure{aspect-ratio:4 / 5}.case-figure img{width:100%;height:100%;object-fit:cover}.case-lead-space{display:none}@supports (animation-timeline: view()) and (timeline-scope: --a){@media(min-width:1100px){html[data-motion=full] .case{--case-title-top: calc( 20px + (54px - .9 * var(--case-big) * var(--case-ratio)) / 2 )}html[data-motion=full] .case-hero{height:200svh}html[data-motion=full] .case-stage{position:sticky;top:0}html[data-motion=full] .case-split{margin-top:-100svh;background:transparent}html[data-motion=full] .case-aside{animation:case-on linear both;animation-timeline:--case-split;animation-range:entry 0% entry 100%}html[data-motion=full] .case-aside-inner{padding-top:var(--case-title-top)}html[data-motion=full] .case-title{height:calc(.9 * var(--case-big) * var(--case-ratio));font-size:var(--case-big)}html[data-motion=full] .case-title>span{transform:scale(var(--case-ratio));transform-origin:0 0}html[data-motion=full] .case-lead{margin-top:72px}html[data-motion=full] .case-gallery{padding-top:0}html[data-motion=full] .case-lead-space{display:block;height:100svh}html[data-motion=full] .case-hero-media{animation:case-media linear both;animation-timeline:--case-split;animation-range:entry 0% entry 100%}html[data-motion=full] .case-hero-media img{animation:case-media-image linear both;animation-timeline:--case-split;animation-range:entry 0% entry 100%}html[data-motion=full] .case-hero-shade{animation:case-fade linear both;animation-timeline:--case-split;animation-range:entry 25% entry 70%}html[data-motion=full] .case-hero-kicker,html[data-motion=full] .case-hero-hint{animation:case-fade linear both;animation-timeline:--case-split;animation-range:entry 0% entry 22%}html[data-motion=full] .case-hero-title{animation:case-title linear both,case-off linear both;animation-timeline:--case-split,--case-split;animation-range:entry 0% entry 100%}html[data-motion=full] .case-step{animation:case-step linear both;animation-timeline:--case-split;animation-range:contain calc(var(--step) * 45px) contain calc(var(--step) * 45px + 220px)}}@keyframes case-on{0%,99.9%{visibility:hidden}to{visibility:visible}}@keyframes case-off{0%,99.9%{opacity:1}to{opacity:0}}@keyframes case-media{0%{clip-path:inset(0 0 0 0);animation-timing-function:cubic-bezier(.6,0,.3,1)}to{clip-path:inset(0 var(--case-gap) 0 calc(2 * var(--case-gap) + (100% - 3 * var(--case-gap)) * .3))}}@keyframes case-media-image{0%{transform:translate(0) scale(1.1);animation-timing-function:cubic-bezier(.6,0,.3,1)}to{transform:translate(calc((.3 * (100% - 3 * var(--case-gap)) + var(--case-gap)) / 2))}}@keyframes case-fade{to{opacity:0}}@keyframes case-title{0%,18%{transform:translateY(calc(100svh - var(--case-title-top) - 1.6 * var(--case-gap) - .9 * var(--case-big)));animation-timing-function:cubic-bezier(.55,0,.25,1)}to{transform:scale(var(--case-ratio))}}@keyframes case-step{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}html[data-motion=full] .case-figure{animation:case-figure linear both;animation-timeline:view();animation-range:entry 0% entry 75%}html[data-motion=full] .case-figure img{animation:case-figure-image linear both;animation-timeline:view();animation-range:entry 0% exit 100%}@keyframes case-figure{0%{transform:translateY(70px)}to{transform:none}}@keyframes case-figure-image{0%{transform:scale(1.14) translateY(-3%)}to{transform:scale(1.02) translateY(3%)}}}@media(max-width:899px){.case-hero,.case-stage{height:100vh;height:100lvh}.case{--case-top: 90px;--case-big: 17vw}.case-hero-title{top:auto;bottom:var(--case-gap);right:var(--case-gap);white-space:normal;transform:none}.case-hero-hint{display:none}.case-split{display:block;padding-bottom:100px}.case-aside-inner{position:static;padding-top:50px}.case-title{font-size:40px;white-space:normal}.case-lead{margin-top:24px}.case-gallery{padding-top:50px;gap:12px}.case-row,.case-row.is-pair{grid-template-columns:1fr;gap:12px}}