/* Work section · Collage. Filled by work-collage.js inside <div class="wg" id="wg"> in index.html. */
/* One button per project; data-shape F (feature) · T (tile) · S (strip) · B (band) decides its look, so a re-deal can morph it. */
/* Shuffle button, appended to the filter row */
.wg-sh{display:inline-flex;align-items:center;gap:7px;height:34px;margin-left:auto;padding:0 15px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:inherit;font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:border-color .16s,color .16s}
.wg-sh:hover{border-color:var(--ink-2);color:var(--ink)}
.wg-sh:focus-visible{outline:2px solid var(--ind);outline-offset:3px}
.wg-sh svg{flex:none;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
/* Desktop: a column of rows of flexible slots */
.wg__c{display:flex;flex-direction:column;gap:12px}
.wg__row{display:flex;gap:12px;min-width:0}
.wg__k{display:flex;flex-direction:column;gap:12px;flex:var(--g) 1 0;min-width:0;min-height:0;transition:flex-grow .5s cubic-bezier(.2,.8,.2,1)}
.wg__i{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;view-transition-class:wg;transition:flex-grow .5s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.wg__row>.wg__i{flex:var(--g) 1 0}
.wg__k>.wg__i{flex:1 1 0}
.wg__i:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:inherit}
.wg__i:focus-visible,.wg__more:focus-visible{outline:2px solid var(--ind);outline-offset:3px}
.wg__row>.wg__i.is-g[data-shape="S"]{flex-grow:1.5}
.wg__row>.wg__i.is-g[data-shape="T"]{flex-grow:calc(var(--g)*1.35)}
.wg__row>.wg__i.is-g[data-shape="F"]{flex-grow:calc(var(--g)*1.12)}
.wg__k.is-g{flex-grow:calc(var(--g)*1.25)}
.wg__k>.wg__i.is-g{flex-grow:1.4}
/* The screenshot fills every card */
.wg__art{position:absolute;inset:0;display:block;overflow:hidden;background:var(--ind-soft);color:var(--ind)}
.wg__i[data-c="green"] .wg__art{background:#EAF7F0;color:#2C8A5E}
.wg__i[data-c="amber"] .wg__art{background:#FFF3E8;color:#C9762C}
.wg__i[data-c="dark"] .wg__art{background:#0E1116;color:#fff}
.wg__i[data-c="violet"] .wg__art{background:#F1EEFC;color:#6C5AD8}
.wg__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.wg__art svg.wg__ph{position:absolute;left:30%;top:25%;width:40%;height:50%}
/* Glass: every caption, panel and pill */
.wg__g{position:absolute;box-sizing:border-box;background:rgba(14,17,22,.58);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.14);color:#fff}
.wg__ft{background:rgba(14,17,22,.65)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.wg__i .wg__g{background:rgba(14,17,22,.8)}}
.wg__g .lab{color:rgba(255,255,255,.72)}
.wg__ft,.wg__cap,.wg__v,.wg__bt,.wg__ar,.wg__tz,.wg__go,.wg__ct{display:none}
.wg__yr{top:10px;right:10px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;line-height:1.3;padding:4px 9px;border-radius:999px;white-space:nowrap}
.wg__ct{top:10px;right:10px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:9px;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;padding:8px 3px;border-radius:999px}
.wg__n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:#fff}
.wg__s{display:block;margin-top:2px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* F · feature: a glass panel sized to its content */
.wg__i[data-shape="F"] .wg__ft{display:flex;flex-direction:column;left:12px;bottom:12px;width:min(calc(100% - 24px),470px);padding:13px 16px 14px;border-radius:16px;container-type:inline-size}
.wg__fl{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg__ft h3{margin:6px 0 0;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wg__kp{display:flex;gap:18px;margin-top:12px;min-width:0}
.wg__kp span{display:block;flex:1;min-width:0}
.wg__kp b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg__kp i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-style:normal;font-size:11.5px;line-height:1.3;color:rgba(255,255,255,.72)}
@container (max-width:400px){.wg__kp span:nth-child(3){display:none}}
.wg-c1 .wg__kp i{-webkit-line-clamp:1}
.wg-c2 .wg__ft h3{-webkit-line-clamp:1}
.wg__i[data-solo] .wg__ft{width:min(46%,540px);padding:20px 22px}
.wg__i[data-solo] .wg__ft h3{font-size:21px}
.wg__i[data-solo] .wg__tz{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.8)}
.wg__i[data-solo] .wg__go{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:500;color:#fff}
/* T · tile */
.wg__cap{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:8px 12px 9px;border-radius:12px}
.wg__i[data-shape="T"] .wg__cap{display:block}
/* S · strip: a vertical glass pill; on hover growth it crossfades to the horizontal caption */
.wg__i[data-shape="S"] .wg__art img{object-position:top left}
.wg__i[data-shape="S"] .wg__yr{display:none}
.wg__i[data-shape="S"] .wg__ct{display:block}
.wg__i[data-shape="S"] .wg__v{display:block;left:10px;bottom:10px;max-height:calc(100% - 20px);writing-mode:vertical-rl;transform:rotate(180deg);padding:11px 5px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.3;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.wg__i[data-shape="S"] .wg__cap{display:block;opacity:0;transition:opacity .15s}
.wg__i.is-g[data-shape="S"] .wg__v,.wg__i.is-g[data-shape="S"] .wg__ct{opacity:0}
.wg__i.is-g[data-shape="S"] .wg__cap{opacity:1;transition:opacity .3s .22s}
/* B · band */
.wg__i[data-shape="B"]{border-radius:var(--r-sm);container-type:inline-size}
.wg__i[data-shape="B"] .wg__art img{object-position:50% 0;transition:object-position 1.6s cubic-bezier(.3,.5,.3,1)}
.wg__i[data-shape="B"]:hover .wg__art img{object-position:50% 30%}
.wg__i[data-shape="B"] .wg__yr{display:none}
.wg__i[data-shape="B"] .wg__bt{display:flex;align-items:center;gap:16px;left:12px;top:50%;transform:translateY(-50%);max-width:calc(100% - 76px);padding:8px 14px 9px;border-radius:12px}
.wg__bm{display:block;flex:none;min-width:0;max-width:100%}
.wg__bm .wg__n{font-size:15px;-webkit-line-clamp:1}
.wg__bti{display:none;min-width:0;max-width:34cqw;padding-left:16px;border-left:1px solid rgba(255,255,255,.2);font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (min-width:900px){.wg__bti{display:block}}
.wg__i[data-shape="B"] .wg__ar{display:grid;place-items:center;right:16px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:999px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.wg__i[data-shape="B"]:hover .wg__ar,.wg__i[data-shape="B"]:focus-visible .wg__ar{transform:translateX(3px)}
/* Show all (tablet and phone) */
.wg__more{display:flex;width:100%;margin-top:16px;height:46px}
.wg__more[hidden]{display:none}
/* View Transitions: shuffle and filter morphs */
:root::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
:root::view-transition-old(*),:root::view-transition-new(*){animation-duration:.3s}
/* Entrance on scroll */
@keyframes wg-in{from{opacity:0;translate:0 18px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.wg__i{animation:wg-in linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}}
/* Tablet: 3-column dense bento, positions from the packer in work-collage.js */
@media(max-width:999.98px){
.wg__c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:76px;gap:12px;grid-auto-flow:dense}
}
/* Phone: 2-column dense bento; filters on one scrollable line with Shuffle pinned at its end */
@media(max-width:639.98px){
.wg__c{grid-template-columns:repeat(2,minmax(0,1fr))}
.wg__i[data-solo] .wg__ft{width:calc(100% - 24px);padding:13px 15px 14px}
.wg__i[data-solo] .wg__tz,.wg__i[data-solo] .wg__go{display:none}
.wg__i[data-shape="F"] .wg__ft{padding:12px 14px 13px}
.wg__ft h3,.wg__i[data-solo] .wg__ft h3{font-size:17px}
.wg__kp b{font-size:18px}
.wg__n{font-size:14px}
.wg__cap{padding:7px 10px 8px}
.wg__i[data-shape="B"] .wg__ar{right:12px}
#filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:14px;margin-right:calc(var(--pad,20px)*-1);padding-right:var(--pad,20px)}
#filters::-webkit-scrollbar{display:none}
#filters .filter{flex:none}
.wg-sh{position:sticky;right:0;z-index:1;flex:none;width:36px;height:34px;padding:0;justify-content:center;margin-left:14px;box-shadow:-8px 0 0 2px var(--bg),-30px 0 14px 0 var(--bg),26px 0 0 2px var(--bg)}
.wg-sh__l{display:none}
}
@media(prefers-reduced-motion:reduce){
.wg__i,.wg__k,.wg__art img,.wg__v,.wg__cap,.wg__ct,.wg__ar,.wg-sh svg{transition:none!important}
.wg__i:hover{transform:none}
.wg__row>.wg__i.is-g,.wg__k.is-g{flex-grow:var(--g)!important}
.wg__k>.wg__i.is-g{flex-grow:1!important}
.wg__i[data-shape="B"]:hover .wg__art img{object-position:50% 0}
.wg__i[data-shape="B"]:hover .wg__ar{transform:none}
}