/* Editorial project covers: the image carries the identity, the caption the context. */
.project-showcase{padding-top:82px;padding-bottom:90px}
.showcase-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:34px}
.showcase-heading h2{font-size:clamp(36px,4.5vw,64px);font-weight:450;line-height:1.08;letter-spacing:-.04em}
.showcase-heading p{max-width:350px;font-size:14px;line-height:1.7;color:var(--muted)}
.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 10px}
.showcase-card{min-width:0}
.showcase-link{display:block;position:relative;aspect-ratio:4/5;background:var(--soft);isolation:isolate;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1)}
.showcase-cover{overflow:hidden;height:100%;width:100%}
.showcase-cover>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.showcase-action{position:absolute;right:14px;bottom:15px;display:flex;align-items:center;gap:12px;background:#fff;color:#151515;border-radius:30px;padding:12px 16px;font-size:12px;opacity:0;transform:translateY(7px);transition:opacity .3s,transform .4s;box-shadow:0 5px 15px #0002}
.showcase-action svg{width:17px;height:17px}
.showcase-link:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.showcase-link:focus-visible .showcase-action{opacity:1;transform:none}
.showcase-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding-right:3px}
.showcase-caption h3{font-size:14px;font-weight:550;letter-spacing:-.02em}
.showcase-caption p{font-size:11px;color:var(--muted);text-align:right;line-height:1.5}
.showcase-more{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);margin-top:36px;padding-top:23px;font-size:12px}
.showcase-more>span{color:var(--muted)}
.showcase-more>div{display:flex;gap:30px;flex-wrap:wrap}
.showcase-more a{display:flex;align-items:center;gap:9px;min-height:32px}
.showcase-more a:hover{text-decoration:underline;text-underline-offset:4px}
.showcase-more svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.showcase-link:hover{transform:translateY(-4px);box-shadow:0 18px 30px -20px #0006}.showcase-link:hover img{transform:scale(1.025)}.showcase-link:hover .showcase-action{opacity:1;transform:none}}
@media(max-width:800px){.project-showcase{padding-top:60px;padding-bottom:65px}.showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:27px 12px}.showcase-heading p{max-width:275px;font-size:13px}.showcase-caption{display:block}.showcase-caption p{text-align:left;margin-top:3px}.showcase-more{display:block}.showcase-more>div{margin-top:12px;gap:12px 25px}}
@media(max-width:540px){.project-showcase{padding-top:43px;padding-bottom:49px}.showcase-heading{display:block;margin-bottom:27px}.showcase-heading h2{font-size:38px}.showcase-heading p{margin-top:17px;max-width:320px}.showcase-grid{gap:23px 10px}.showcase-caption h3{font-size:12px}.showcase-caption p{font-size:11px}.showcase-action{padding:8px;right:7px;bottom:7px}.showcase-action span{display:none}.showcase-action{opacity:1;transform:none}.showcase-more>div{gap:8px 20px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.showcase-link,.showcase-cover>img,.showcase-action{transition:none;transform:none!important}}

/* Two small case studies use the same editorial structure as the client work. */
.study-main{padding-bottom:40px}
.study-hero{background:#080909;padding:7%;color:#f5f5f2}
.study-hero img{display:block;width:100%;height:auto}
.study-hero figcaption{color:#a7adab!important}
.study-explanation{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:75px 0;border-bottom:1px solid var(--line)}
.study-explanation h2{font-size:clamp(34px,3.5vw,52px);font-weight:450;letter-spacing:-.04em;line-height:1.15;max-width:460px}
.study-explanation p{font-size:15px;line-height:1.85;margin-bottom:20px;max-width:520px}
.study-points{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.study-points li{font-size:14px;line-height:1.7;border-top:1px solid var(--line);padding-top:15px}
.study-points strong{display:block;font-weight:550;margin-bottom:3px}
.study-points span{color:var(--muted)}
.study-film{padding:60px 0}
.study-film video{width:100%;display:block;aspect-ratio:16/9;background:#000;object-fit:contain}
.study-film figcaption{display:flex;justify-content:space-between;gap:20px}
.interface-demo{--demo-bg:#e7ece9;--demo-panel:#f4f6f0;--demo-ink:#202923;--demo-line:#bec6bf;--demo-muted:#55625a;--demo-active:#1d2c24;--demo-active-ink:#fff;position:relative;background:var(--demo-bg);color:var(--demo-ink);padding:55px;min-height:470px;display:grid;place-items:center;transition:background .25s,color .25s;color-scheme:light}
.interface-demo[data-surface=dark]{--demo-bg:#202423;--demo-panel:#2c3230;--demo-ink:#f2f5f3;--demo-line:#58615b;--demo-muted:#c1cbc4;--demo-active:#e4ece6;--demo-active-ink:#142319;color-scheme:dark}
.interface-demo[data-surface=black]{--demo-bg:#030404;--demo-panel:#111614;--demo-ink:#f3f6f4;--demo-line:#48554b;--demo-muted:#bac6bd;--demo-active:#e4ece6;--demo-active-ink:#142319;color-scheme:dark}
.interface-demo-panel{width:min(100%,500px);padding:26px;background:var(--demo-panel);border:1px solid var(--demo-line);border-radius:20px}
.interface-demo-label{display:flex;justify-content:space-between;align-items:center;font-size:17px;margin-bottom:22px}
.interface-demo-label svg{width:21px;height:21px}
.interface-options{display:flex;padding:5px;gap:4px;border:1px solid var(--demo-line);border-radius:40px}
.interface-options button{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;gap:8px;padding:12px 4px;border-radius:40px;font-size:12px;min-height:44px;color:var(--demo-ink)}
.interface-options button svg{width:17px;height:17px;flex:none}
.interface-options button[aria-pressed=true]{background:var(--demo-active);color:var(--demo-active-ink)}
.interface-options button:focus-visible{outline:2px solid var(--demo-ink);outline-offset:2px}
.interface-example{margin-top:27px;padding-top:24px;border-top:1px solid var(--demo-line);display:grid;grid-template-columns:1fr auto;gap:6px 20px}
.interface-example span{font-size:12px;color:var(--demo-muted)}
.interface-example strong{font-weight:450;font-size:27px;letter-spacing:-.035em}
.interface-example svg{width:22px;height:22px;grid-row:1/3;grid-column:2;align-self:center}
.interface-demo-status{font-size:12px;color:var(--demo-muted);margin-top:26px}
.study-related{display:flex;flex-wrap:wrap;gap:22px;margin-top:25px}
@media(max-width:760px){.study-explanation{grid-template-columns:1fr;gap:25px;padding:46px 0}.study-explanation p{font-size:14px}.study-explanation h2{font-size:37px}.study-film{padding:40px 0}.interface-demo{padding:28px;min-height:380px}.interface-demo-panel{padding:20px}.study-hero{padding:7% 4%}.study-film figcaption{display:grid;gap:8px}}
@media(max-width:420px){.interface-demo{padding:16px;min-height:330px}.interface-demo-panel{padding:16px}.interface-options button{font-size:11px;gap:5px}.interface-options button svg{width:14px}.interface-example strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){.interface-demo{transition:none}}

/* Three projects stay in one editorial row; small screens can browse sideways. */
.showcase-swipe-note{display:none}
.showcase-grid:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
@media(max-width:540px){
 .showcase-swipe-note{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted);margin:-5px 0 15px}
 .showcase-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding-bottom:13px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
 .showcase-card{scroll-snap-align:start}
 .showcase-caption h3{font-size:14px}
}