.case{--ink:#0b0b0c;--dim:#6b6b6b;--rule:var(--line);--sec:clamp(96px, 12vw, 200px);--content:1440px;--measure:min(78%, var(--content));color:var(--ink)}.case-first{max-height:max(100svh - var(--header-h), 540px);flex-direction:column;display:flex}.case-top{background:var(--case);min-height:0;color:var(--case-fg);flex-direction:column;flex:0 auto;padding-top:clamp(12px,1.2vw,20px);display:flex;position:relative;overflow:hidden}.case-top__text{z-index:1;width:100%;padding-inline:var(--gutter);flex:none;margin-inline:auto;position:relative}.case-name{font-size:var(--text-lead);align-items:center;gap:10px;line-height:1.4;display:flex}.case-back{place-items:center;width:44px;height:44px;margin:-10px -13px;display:grid}.case-back span{transition:transform .25s var(--ease)}@media (hover:hover) and (pointer:fine){.case-back:hover span{transform:translate(-3px)}}.case-title{font-size:var(--text-title);text-wrap:balance;margin-top:8px;line-height:1.05}.case-title,.case-title *{letter-spacing:-.04em}.case-title .word{display:inline-block}.case-stage{flex-direction:column;flex:0 auto;min-height:0;padding-top:clamp(28px,4%,64px);display:flex;position:relative}.case-stage__bg{object-fit:cover;object-position:top;width:100%;height:100%;position:absolute;inset:0;mask-image:linear-gradient(#0000,#000 45%)}.case-stage__glow{filter:blur(102px);background:#fff6;border-radius:50%;height:80%;position:absolute;inset:50% 0 auto}.case-stage__shot{--hang:clamp(20px, 2.5vw, 48px);width:var(--measure);margin:0 auto calc(-1 * var(--hang));border-radius:12px 12px 0 0;flex:none;display:block;position:relative}@media (prefers-reduced-motion:no-preference){.case-title .word{animation:case-word .9s var(--ease) both;animation-delay:calc(.26s + var(--i) * 60ms)}.case-stage__bg{animation:case-settle 1.8s var(--ease) .2s both}.case-stage__shot{animation:case-rise 1.3s var(--ease) .55s both}}html[data-morph] .case-stage__bg,html[data-morph] .case-stage__shot{animation:none}@keyframes case-word{0%{opacity:0;transform:translateY(.4em)}}@keyframes case-settle{0%{scale:1.18}}@keyframes case-rise{0%{opacity:0;transform:translateY(14%)}}.case-col{width:100%;max-width:calc(var(--page) + 2 * var(--gutter));padding-inline:var(--gutter);margin-inline:auto}@media (width>=768px){.case-top__text,.case-col{width:var(--measure);max-width:none;padding-inline:0}}.case-strip{flex:none;padding-block:clamp(28px,3.4vw,48px) clamp(24px,3vw,40px)}.case-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;max-width:36rem;display:grid}.case-meta>div{border-top:1px solid var(--rule);font-size:var(--text-sm);padding-top:16px;line-height:1.5}.case-meta dt{color:var(--dim)}.case-section,.case-next{padding-top:var(--sec);grid-template-columns:minmax(0,3fr) minmax(0,9fr);align-items:start;column-gap:32px;display:grid}.case-section>*,.case-next>*{grid-column:2;max-width:36rem}.case-section>h2,.case-next>h2{max-width:18ch;font-size:var(--text-h3);text-wrap:balance;grid-area:1/1/span 50;line-height:1.15}.case-first+.case-section>p,.case-first+.case-section+.case-section>p{max-width:42rem}.case-section p{color:var(--dim);text-wrap:pretty;line-height:1.6}.case-section p+p{margin-top:1.3em}.case-first+.case-section,.case-col+.case-section{padding-top:clamp(56px,6vw,96px)}.case-section.case-section--close{padding-top:clamp(40px,5vw,72px)}.case-figure{margin-top:clamp(40px,5vw,72px)}.case-figure img{width:100%}.case-figure--contained{max-width:calc(var(--page) + 2 * var(--gutter));padding-inline:var(--gutter);margin-inline:auto}@media (width>=768px){.case-figure--contained{width:var(--measure);max-width:none;padding-inline:0}}@media (prefers-reduced-motion:no-preference){html.js .case-figure .reveal{transition:opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.2s var(--ease)}html.js .case-figure .reveal:not(.is-in){clip-path:inset(0 0 22%)}html.js .case-figure .reveal.is-in{clip-path:inset(0)}}.case-next>.case-card{max-width:none}.case-card{display:block}.case-card__media{aspect-ratio:616/352;background:var(--surface);overflow:hidden}.case-card__media img{object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.49,.23,.06,1)}.case-card h3{font-size:var(--text-card);margin-top:16px;line-height:1.3}.case-card p{color:var(--dim);margin-top:2px;line-height:1.4}@media (hover:hover) and (pointer:fine){.case-card:hover .case-card__media img{transform:scale(1.1)}}.case-card:active .case-card__media img{transition-duration:.12s;transform:scale(1.06)}@media (width<=1023.98px){.case-section,.case-next{grid-template-columns:minmax(0,1fr)}.case-section>*,.case-section>h2,.case-next>*,.case-next>h2{grid-area:auto/1}.case-section>h2,.case-next>h2{max-width:none;font-size:calc(clamp(24px, 1.2vw + 20px, 30px) * var(--type-scale));margin-bottom:20px}}@media (width<=767.98px){.case-stage{padding-top:24px}.case-stage__shot{width:150%;max-width:none;margin:0 0 -16% var(--gutter);border-radius:8px 0 0}}.case-first--tile{max-height:none;display:block}.case-first--tile .case-top{color:inherit;background:0 0;padding-top:clamp(20px,2.4vw,40px);overflow:visible}.case-first--tile .case-name{color:var(--dim)}.case-first--tile .case-title{max-width:14em;font-size:calc(clamp(32px, 3.6vw, 60px) * var(--type-scale))}.case-first--tile .case-meta{margin-top:28px}@media (width>=1200px){.case-first--tile .case-top__text{grid-template-columns:minmax(0,1fr) 26rem;align-items:end;column-gap:32px;display:grid}.case-first--tile .case-name{grid-column:1/-1}.case-first--tile .case-meta{margin:0 0 .5em}}.case-first--tile .case-stage{--w:min(78vw, var(--content));width:var(--measure);--tile-h:clamp(var(--w) * .46, 100svh - var(--header-h) - 286px, var(--w) * .62);height:var(--tile-h);background:var(--case);margin:clamp(40px,3.8vw,64px) auto 0;padding:0;display:block;overflow:hidden}.case-first--tile .case-stage__bg{mask-image:none}.case-first--tile .case-stage__shot{border-radius:10px;width:auto;max-width:72%;height:auto;max-height:80%;margin:auto;position:absolute;inset:0;box-shadow:0 24px 64px #0000002e}@media (width<=767.98px){.case-first--tile .case-stage{--tile-h:calc((100vw - 2 * var(--gutter)) * .75);width:auto;margin-inline:var(--gutter)}.case-first--tile .case-stage__shot{border-radius:6px;max-width:86%}}
