/* WORK */
.work{padding:80px 0 90px}
.wlist{border-top:1px solid var(--line-2);position:relative}
.witem{display:flex;align-items:center;gap:24px;padding:30px 8px;border-bottom:1px solid var(--line-2);cursor:pointer;position:relative;transition:padding-left .35s ease}
.witem:hover{padding-left:28px}
.witem .wix{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-faint);width:40px;flex:none}
.witem .wnm{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,58px);letter-spacing:-.03em;line-height:1;transition:color .25s;flex:none}
.witem:hover .wnm{color:var(--brand)}
.witem .wmid{flex:1;display:flex;flex-direction:column;gap:6px;padding-left:10px}
.witem .wsub{font-size:14px;color:var(--ink-soft);max-width:330px;opacity:0;transform:translateX(-8px);transition:.3s}
.witem:hover .wsub{opacity:1;transform:none}
.witem .wtags{display:flex;gap:7px}
.witem .wtags .ft{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:6px;background:var(--soft);color:var(--ink-soft)}
.witem .wdate{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-faint);flex:none}
.witem .warr{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none;transition:.25s}
.witem .warr svg{width:18px;height:18px;transition:transform .25s}
.witem:hover .warr{background:var(--brand);border-color:var(--brand);color:#fff}
.witem:hover .warr svg{transform:translate(2px,-2px)}
.witem .winline{display:none}
.wpreview{position:fixed;top:0;left:0;width:380px;height:214px;max-width:90vw;border-radius:14px;pointer-events:none;z-index:80;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .25s,transform .25s;overflow:hidden;box-shadow:0 30px 60px -24px rgba(20,19,16,.55);display:grid;place-items:center}
.wpreview.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wpreview .flbl{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:10px;font-weight:700;background:#fff;color:var(--ink);padding:3px 8px;border-radius:4px}
.wpreview .pg{font-family:var(--display);font-weight:700;font-size:44px;color:#ffffff2e;text-align:center;line-height:.95}
.pv-tool{background:linear-gradient(135deg,#0a3a5e,#0D99FF)}.pw-panel.pv-shot{background:#0f1822}.pw-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;z-index:0}.pw-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,20,.10) 0%,rgba(8,14,20,.16) 45%,rgba(8,14,20,.62) 100%);z-index:1;pointer-events:none}.pw-panel.pv-shot .pw-ix{color:rgba(255,255,255,.92);z-index:5}.pw-panel.pv-shot .pw-vname{color:#fff;z-index:3;text-shadow:0 1px 12px rgba(0,0,0,.4)}.pw-panel.pv-shot .pw-info,.pw-panel.pv-shot .pw-info h3,.pw-panel.pv-shot .pw-info p{color:#fff}.pw-panel.pv-shot .pw-chrome{color:rgba(255,255,255,.9)}.pw-panel.pv-shot .pw-chrome i{background:rgba(255,255,255,.6)}.pw-panel.pv-shot .pw-tags span{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}.pw-panel.pv-shot .pw-exp{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.55))}
.pv-ink{background:linear-gradient(135deg,#14130f,#34322a)}
.pv-brand{background:linear-gradient(135deg,#7a2a10,#F0531C)}
.pv-paper{background:linear-gradient(135deg,#e7e1d1,#cbc4b0)}.pv-paper .pg{color:#14130f1f}
@media(max-width:820px){
  .wpreview{display:none}
  .witem{flex-wrap:wrap;gap:14px;padding:22px 0!important}
  .witem .wmid{flex-basis:100%;padding-left:0}.witem .wsub{opacity:1;transform:none}.witem .wdate{display:none}
  .witem .winline{display:grid;place-items:center;flex-basis:100%;height:200px;border-radius:12px;position:relative}
  .witem .winline .flbl{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:10px;font-weight:700;background:#fff;color:var(--ink);padding:3px 8px;border-radius:4px}
  .witem .winline .pg{font-family:var(--display);font-weight:700;font-size:40px;color:#ffffff2e}
}