.zn-work-page{background:var(--paper)}.zn-work-count{color:var(--night);border:3px solid var(--night);box-shadow:4px 4px 0 var(--night);font:700 .85rem/1 var(--f-mono);background:#fff;margin:1.6rem 0 0;padding:.55rem .9rem;display:inline-block;rotate:1.5deg}.zn-work-archive{padding:clamp(4rem,8vw,7rem) 0 clamp(5rem,9vw,8rem)}.zn-work-grid{grid-template-columns:1fr;gap:3rem 2.25rem;margin:0;padding:0;list-style:none;display:grid}@media (width>=1024px){.zn-work-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}.zn-work-cell{grid-column:span var(--span,6)}}.zn-wk{--art-h:11rem;background:var(--surface);min-width:0;color:var(--ink);border:3px solid var(--edge);box-shadow:8px 8px 0 var(--shadow-color);rotate:var(--rot);transition:rotate .45s var(--spring), translate .3s var(--expo), box-shadow .3s var(--expo);flex-direction:column;display:flex}.zn-wk:focus-within{box-shadow:12px 12px 0 var(--shadow-color);translate:-4px -4px;rotate:0deg}@media (hover:hover){.zn-wk:hover{box-shadow:14px 14px 0 var(--shadow-color);translate:-6px -6px;rotate:0deg}}@media (width>=1024px){.zn-wk[data-size=sm]{--art-h:12.75rem}.zn-wk[data-size=md]{--art-h:14.75rem}.zn-wk[data-size=lg]{--art-h:17rem}.zn-wk[data-size=xl]{--art-h:19.5rem}}.zn-wk-art{height:var(--art-h);isolation:isolate;background:var(--spot);border-bottom:3px solid var(--edge);position:relative;overflow:hidden}.zn-wk-art>svg{mix-blend-mode:multiply;filter:grayscale()contrast(1.45)brightness(1.04);width:100%;height:100%;position:absolute;inset:0}.zn-wk-art:after{content:"";pointer-events:none;mix-blend-mode:multiply;opacity:.35;background-image:radial-gradient(circle,#0d0b1e 1.1px,#0000 1.6px);background-size:7px 7px;position:absolute;inset:0}.zn-wk-no,.zn-wk-cat{z-index:2;border:2px solid var(--night);color:var(--night);position:absolute}.zn-wk-no{font:700 .75rem/1 var(--f-mono);background:#fff;padding:.3rem .5rem;top:.7rem;left:.7rem}.zn-wk-cat{background:var(--yellow);font:700 .68rem/1 var(--f-mono);letter-spacing:.04em;box-shadow:3px 3px 0 var(--night);transition:rotate .35s var(--spring);padding:.35rem .6rem;bottom:.7rem;right:.7rem;rotate:-3deg}@media (hover:hover){.zn-wk:hover .zn-wk-cat{rotate:3deg}}.zn-wk-body{flex-direction:column;flex:1;align-items:flex-start;gap:.8rem;padding:1.3rem 1.3rem 1.5rem;display:flex}.zn-wk-kind{z-index:3;color:var(--night);border:2px solid var(--night);box-shadow:3px 3px 0 var(--night);font:700 .68rem/1 var(--f-mono);letter-spacing:.02em;text-transform:uppercase;background:#fff;margin:-2.1rem auto .2rem 0;padding:.35rem .7rem;position:relative;rotate:-2.5deg}.zn-wk-kind:before{content:"";background:#ffffffb3;border-inline:2px dashed #0d0b1e47;width:2.2rem;height:.8rem;position:absolute;top:-.55rem;left:50%;translate:-50%;rotate:-4deg}.zn-wk-kind.is-client{background:var(--lavender)}.zn-wk-title{font:800 clamp(1.5rem, 2.4vw, 1.9rem) / 1.02 var(--f-display);letter-spacing:-.025em;text-wrap:balance;margin:0}.zn-wk-ex{color:var(--dim);text-wrap:pretty;margin:0;font-size:.97rem;line-height:1.6}.zn-wk-badges{flex-wrap:wrap;gap:.45rem;margin:.2rem 0 0;padding:0;list-style:none;display:flex}.zn-wk-badges li{border:2px solid var(--edge);background:var(--tint);font:600 .7rem/1 var(--f-mono);padding:.3rem .6rem}.zn-wk-links{flex-wrap:wrap;gap:.9rem 1rem;margin-top:auto;padding-top:.9rem;display:flex}.zn-wk-links .zn-btn{min-height:44px;padding:.55rem 1rem;font-size:.95rem}.zn-wk-links .zn-btn--outline{border-color:var(--edge);--fg:var(--ink);--sh:var(--shadow-color)}.zn-work-end{--shadow-color:var(--night);--focus:var(--night);background:var(--yellow);color:var(--night);border-block:4px solid var(--edge);padding:clamp(3.5rem,7vw,6rem) 0}.zn-work-end-in{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.8rem 2.5rem;display:flex}.zn-work-end-h{font:800 clamp(2rem, 5vw, 3.6rem) / .95 var(--f-display);letter-spacing:-.03em;margin:0}.zn-work-end-act{flex-wrap:wrap;gap:1.2rem;display:flex}.zn-work-end .zn-btn--outline{border-color:var(--night)}.zn-work-chip{cursor:default}@media (hover:hover){.zn-work-chip:hover{box-shadow:4px 4px 0 var(--shadow-color);translate:0;rotate:-1.5deg}}
