/* Recent work: editorial project list, the mockup floats beside the cursor on hover (adapted from 21st.dev Project Showcase).
   On touch screens each row shows its mockup inline instead. */
.wl-section{position:relative;padding:100px 0 110px;background:#fff}
.wl-shell{width:min(1120px,calc(100% - 48px));margin:0 auto}
.wl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:44px}
.wl-kicker{display:block;font:600 11.5px/1.3 Inter,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:#7c3aed;margin:0 0 12px}
.ap-inner-page main .wl-title{margin:0;font:600 clamp(32px,3.8vw,48px)/1.06 Fustat,Inter,sans-serif;letter-spacing:-.04em;color:#1b1235}
.ap-inner-page main .wl-title em{font:italic 400 1.06em/1 "Instrument Serif",Georgia,serif;letter-spacing:-.02em;background:linear-gradient(110deg,#4b1f7a,#9b5fd6 50%,#6a33a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wl-lead{margin:0;max-width:30em;font:400 16px/1.6 Inter,sans-serif;color:#5d526e}
.wl-list{list-style:none;margin:0;padding:0;border-bottom:1px solid #e9e3f2}
.wl-row{position:relative;border-top:1px solid #e9e3f2}
.wl-link{position:relative;display:grid;grid-template-columns:44px 48px minmax(0,1fr) auto;align-items:center;gap:20px;padding:28px 18px;margin:0 -18px;border-radius:16px;color:inherit;text-decoration:none;transition:background .3s ease}
.wl-row:hover .wl-link,.wl-link:focus-visible{background:#f8f5fd}
.wl-link:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}
.wl-num{font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a79cbb;font-variant-numeric:tabular-nums}
.wl-logo{width:48px;height:48px;border-radius:13px;overflow:hidden;box-shadow:0 0 0 1px #ece6f5;transition:transform .35s ease}
.wl-logo img{width:100%;height:100%;object-fit:cover;display:block}
.wl-row:hover .wl-logo{transform:scale(1.06) rotate(-3deg)}
.wl-name{display:inline-flex;align-items:center;gap:10px;font:600 clamp(22px,2.4vw,30px)/1.15 Fustat,Inter,sans-serif;letter-spacing:-.035em;color:#1b1235}
.wl-name span{position:relative}
.wl-name span::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:#7c3aed;transition:width .35s ease}
.wl-row:hover .wl-name span::after{width:100%}
.wl-name svg{width:18px;height:18px;color:#7c3aed;opacity:0;transform:translate(-6px,6px);transition:opacity .3s ease,transform .3s ease}
.wl-row:hover .wl-name svg{opacity:1;transform:none}
.wl-desc{display:block;margin-top:6px;font:400 15.5px/1.55 Inter,sans-serif;color:#6b6280;max-width:40em;transition:color .3s ease}
.wl-row:hover .wl-desc{color:#3f3654}
.wl-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.wl-tags{font:500 12.5px/1.3 Inter,sans-serif;color:#8a7fa0}
.wl-status{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:#f1ecfa;font:600 12px/1 Inter,sans-serif;color:#4b2f8f;white-space:nowrap}
.wl-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e}
.wl-status--case::before{background:#7c3aed}
.wl-status--soon{background:#fff4e5;color:#9a5b00}
.wl-status--soon::before{background:#f59e0b}
.wl-inline{display:none}
.wl-float{position:absolute;left:0;top:0;z-index:5;width:400px;aspect-ratio:4/3;border-radius:20px;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(0,0,0) scale(.85);transition:opacity .3s cubic-bezier(.4,0,.2,1),scale .3s cubic-bezier(.4,0,.2,1);box-shadow:0 40px 80px -30px rgba(27,18,53,.45),0 0 0 1px rgba(27,18,53,.06);background:#efe9f8;will-change:transform}
.wl-float.is-on{opacity:1;scale:1}
.wl-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);filter:blur(10px);transition:opacity .45s ease,transform .45s ease,filter .45s ease}
.wl-float img.is-on{opacity:1;transform:none;filter:none}
@media (hover:none),(max-width:900px){
  .wl-float{display:none}
  .wl-inline{display:block;width:100%;height:auto;border-radius:16px;margin:0 0 26px;aspect-ratio:4/3;object-fit:cover;background:#efe9f8}
}
@media (max-width:900px){
  .wl-section{padding:64px 0 70px}
  .wl-shell{width:calc(100% - 32px)}
  .wl-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
  .wl-link{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"logo main" "logo meta";gap:6px 14px;padding:22px 0;margin:0;border-radius:0}
  .wl-row:hover .wl-link{background:none}
  .wl-num{display:none}
  .wl-logo{grid-area:logo;width:40px;height:40px;border-radius:11px;align-self:start}
  .wl-main{grid-area:main}
  .wl-meta{grid-area:meta;flex-direction:row;align-items:center;flex-wrap:wrap;text-align:left;margin-top:6px}
  .wl-name svg{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.wl-float,.wl-float img,.wl-logo{transition:none}}