/* Static work gallery. Entry / settled share one frame; motion comes later. */
.works{--work-paper:#f1f2f6;--work-ink:#24282e;background:var(--work-paper);color:var(--work-ink);margin:0 -2.84vw;padding:56px 0 76px;font-family:"Figtree",Arial,"PingFang SC",sans-serif;outline:none}
.works-stage{width:min(1200px,calc(100% - 96px),calc((100svh - 220px)*16/9));margin-inline:auto;position:relative}
.works[data-scroll-motion="ready"] .works-stage{transform:translate3d(0,var(--works-scroll-y,0),0) scale(var(--works-scroll-scale,1));transform-origin:50% 50%;will-change:transform}
.works-frame{aspect-ratio:16/9;position:relative;border-radius:36px;overflow:hidden;background:#0879f0;box-shadow:0 16px 40px -28px #1c314946}
.work-panel{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--cover-bg,#eaf3f8)}
.work-panel[hidden]{display:none}
.work-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.work-panel[data-key="uc"]{--cover-bg:#0879f0}
.work-panel[data-key="commerce"]{--cover-bg:#c9a18c}
.work-panel[data-key="graphic"]{--cover-bg:#202c36}
.work-placeholder{display:flex;align-items:center;isolation:isolate;padding:7%;background:var(--cover-fill);color:var(--cover-ink)}
.work-placeholder--commerce{--cover-fill:radial-gradient(ellipse at 100% 0,#ffe9ac,transparent 65%),linear-gradient(110deg,#ff3924,#ff963f);--cover-ink:#fffaf4}
.work-placeholder--monitor{--cover-fill:linear-gradient(125deg,#071f42,#123e75);--cover-ink:#f3f7ff}
.work-placeholder-copy{position:relative;z-index:1;width:65%}
.work-placeholder h3{font-family:"Google Sans",Arial,sans-serif;font-size:clamp(28px,5.3vw,76px);line-height:1.06;letter-spacing:-.045em;font-weight:500;margin:0 0 24px}
.work-placeholder p{font-size:clamp(14px,1.4vw,20px);margin:0;line-height:1.5}
.work-placeholder-object{position:absolute;width:45%;height:90%;right:-1%;bottom:-3%;object-fit:contain;z-index:0}
.works-tabs{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:0;margin:-24px auto 0;padding:0 16px;min-height:92px;width:max-content;max-width:100%}
.work-tab{position:relative;flex:0 0 66px;width:66px;height:80px;padding:0;background:none;border:0;isolation:isolate}
.work-thumb{display:block;position:absolute;width:80px;height:80px;left:50%;top:0;transform:translateX(-50%) rotate(var(--angle));border:3px solid #fff;border-radius:19px;background:var(--thumb-bg,#e8edf3);box-shadow:0 5px 10px #27334524;overflow:hidden}
.work-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.work-tab[data-key="commerce"] .work-thumb{--thumb-bg:radial-gradient(ellipse at 70% 40%,#f4e9dc,#c9a18c 72%);}
.work-thumb--commerce img{position:absolute;left:50%;top:50%;width:auto;height:82%;max-width:none;object-fit:contain;padding:3px;box-sizing:border-box;border:1px solid #ffffffbb;border-radius:8px;background:linear-gradient(100deg,#302b28,#141414 25%,#25211f);box-shadow:4px 6px 9px #49352e55;transform:translate(-50%,-50%) rotate(-7deg)}
.work-tab[aria-selected="true"]{z-index:3}
.work-tab[aria-selected="true"] .work-thumb{transform:translate(-50%,-8px) rotate(0);outline:2px solid #24282e;outline-offset:3px}
.work-tab:hover{z-index:4}
.work-tab:hover .work-thumb{transform:translate(-50%,-8px) rotate(0)}
.work-tab:focus-visible{outline:none;z-index:5}
.work-tab:focus-visible .work-thumb{outline:3px solid #1255dd;outline-offset:5px}
.works-caption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;width:100%;padding-top:21px}
.works-caption h2{font-size:24px;font-weight:500;line-height:1.3;letter-spacing:-.5px;margin:0}
.works-caption p{font-size:14px;line-height:1.5;color:#61646b;margin:0;text-align:right}
.portfolio-footer{margin:0 -2.84vw -5.25vh;padding:24px 5.5556vw 32px;background:#f1f2f6;display:flex;justify-content:space-between;gap:20px;color:#61646b;font:13px/1.6 "Figtree",Arial,sans-serif}
.works[data-view="entry"]{padding-top:0}
.works[data-view="entry"] .works-stage{width:100%}
.works[data-view="entry"] .works-frame{border-radius:0;box-shadow:none}
.works[data-view="entry"] .works-caption{padding-inline:5.5556vw}
@media(max-width:1000px){.works-stage{width:calc(100% - 56px)}.works{padding-top:40px}.works-frame{border-radius:28px}}
@media(max-width:760px){
 .works{margin-inline:-12px;padding:28px 0 56px}
 .works-stage{width:calc(100% - 32px)}
 .works-frame{border-radius:20px}
 .works-tabs{margin-top:-10px;min-height:68px;padding-inline:8px}
  .work-tab{flex-basis:46px;width:46px;height:54px}
 .work-thumb{width:54px;height:54px;border-width:2px;border-radius:13px}
 .work-tab[aria-selected="true"] .work-thumb{transform:translate(-50%,-4px)}
 .works-caption{display:block;padding:13px 8px 0}
 .works-caption h2{font-size:21px;letter-spacing:-.4px}
 .works-caption p{text-align:left;margin-top:7px;font-size:14px}
 .work-placeholder h3{font-size:clamp(24px,6.6vw,48px);margin-bottom:10px}
 .work-placeholder p{font-size:14px;max-width:170px}
 .work-placeholder-object{width:43%;right:0}
 .portfolio-footer{margin:0 -12px -16px;padding:20px 24px 24px;font-size:12px}
}

.work-case-link{position:absolute;right:24px;bottom:24px;display:flex;align-items:center;gap:24px;background:#fff;color:#172231;padding:14px 20px;border-radius:30px;font-size:15px;box-shadow:0 3px 16px #0002}.work-case-link:focus-visible{outline:3px solid #1264df;outline-offset:4px}@media(max-width:600px){.work-case-link{right:12px;bottom:12px;padding:10px 14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.works[data-scroll-motion="ready"] .works-stage{transform:none!important;will-change:auto}}

.work-panel--tokenboard{background:#020302;overflow:hidden}.work-panel--tokenboard .tokenboard-work-cover{object-fit:contain;object-position:center;background:#020302}.work-panel--tokenboard .work-case-link{z-index:2}

#work-uc .work-cover{object-fit:cover;object-position:center}#work-model .work-cover{object-fit:cover;object-position:center}
.work-panel[data-key="model"]{--cover-bg:#eaf3f8}




/* v1.15: monitor thumb is now a plain crop of the HD cover; v16 framed-thumb rules removed. */
.work-tab[data-key="monitor"] .work-thumb img{object-position:50% 50%}

/* v1.13: juice artwork; every case link stays bottom-right. */
#work-graphic .work-cover{object-fit:cover;object-position:center}
.work-tab[data-key="graphic"] .work-thumb img{object-fit:cover}