/* Mother Machine · 04 Work, il registro delle macchine.
   Dal manuale: "La pagina dei lavori e' un registro: numero di serie, cliente, cosa abbiamo costruito, risultato.
   Filtri per settore, si legge in un colpo d'occhio." Linguaggio machine: niente vetro in questa pagina
   (punto situazione: il vetro solo in home, Brand e Systems). Il colore lo portano le copertine dei clienti. */

/* ---- 04 · apertura ---- */
.wko{padding-block:clamp(120px,13vw,180px) clamp(48px,6vw,88px)}
.wkotop{display:flex;justify-content:space-between;gap:16px}
.wko h1{margin:clamp(28px,4vw,52px) 0 0;font:650 clamp(52px,9vw,148px)/.88 var(--f-body);letter-spacing:-.055em;max-width:12ch;text-wrap:balance}
.wkorow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,80px);align-items:end;margin-top:clamp(36px,4vw,56px)}
.wkorow p{margin:0;font:400 clamp(18px,1.5vw,21px)/1.45 var(--f-body);max-width:44ch;color:var(--ink)}
.wkplate{width:280px;padding:16px 20px 14px}
.wkplate .hd{font-size:11px}
.wkplate dl{font-size:11px}

/* ---- 04.1 · l'ultimo lavoro ---- */
.wkf{padding-block:0 clamp(56px,7vw,96px)}
.wkfc{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:end;color:inherit;text-decoration:none}
.wkfv{position:relative;aspect-ratio:16/11;background:var(--c);overflow:hidden}
.wkfc:hover .wph{scale:1.03}
.wkfc:hover .wcta,.wkfc:focus-visible .wcta{opacity:1;transform:none}
.wkfc:focus-visible{outline:2px solid #2D46E0;outline-offset:6px}
.wkft{display:grid;align-content:end}
.wkft h2{margin:16px 0 10px;font:650 clamp(34px,3.6vw,58px)/.95 var(--f-body);letter-spacing:-.045em;text-wrap:balance}
.wkft p{margin:0;color:var(--mut);font-size:16px;max-width:36ch}
.wkfb{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.wkfb li{display:flex;align-items:center;gap:10px}
.wkfb li::before{content:"";width:7px;height:7px;background:currentColor;opacity:.55}
.wkft .wn{margin-top:28px}
.wkfl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;padding-top:18px;border-top:1.5px solid var(--ink)}
.wkfl b{font:600 clamp(20px,1.6vw,24px)/1 var(--f-body);letter-spacing:-.02em}

/* ---- 04.2 · il registro ---- */
.wkr{padding-block:clamp(40px,5vw,72px) clamp(72px,9vw,128px)}
.wkrh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:22px}
.wkrh h2{margin:0;font:650 clamp(34px,3.6vw,56px)/1 var(--f-body);letter-spacing:-.045em}
.wkrt{display:flex;gap:clamp(16px,2.4vw,32px);align-items:center;flex-wrap:wrap}
.wkr .chipsF{margin:0}
.wkr .chipsF button{padding:9px 12px;font-size:11.5px;transition:background-color .2s,color .2s,border-color .2s}
.wkr .chipsF button:not(.on):hover{border-color:var(--ink)}
.wkr .chipsF button:focus-visible,.wkv button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wkv{display:flex;border:1px solid var(--ln)}
.wkv button{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;padding:9px 13px;font:inherit;letter-spacing:inherit;color:var(--mut);transition:color .2s,background-color .2s}
.wkv button.on{background:var(--ink);color:var(--bg)}
.wkv button:not(.on):hover{color:var(--ink)}
.ic-reg,.ic-cov{display:inline-grid;width:12px;height:12px;flex:none}
.ic-reg{background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 5px/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 10px/100% 2px no-repeat}
.ic-cov{background:linear-gradient(currentColor,currentColor) 0 0/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 7px 0/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 0 7px/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 7px 7px/5px 5px no-repeat}

.wkl{list-style:none;margin:0;padding:0}
.wkhd,.wkl>li>*{display:grid;grid-template-columns:104px minmax(0,1.25fr) minmax(0,1.5fr) 84px 118px minmax(0,1fr);gap:clamp(12px,1.6vw,24px);align-items:center}
.wkhd{padding:0 0 12px;border-bottom:1.5px solid var(--ink);color:var(--mut);font-size:10.5px}
.wkhd .r,.wk-rs{text-align:right}
.wkl>li>*{padding:22px 0;border-bottom:1px solid var(--ln);color:inherit;text-decoration:none;position:relative;transition:background-color .25s}
.wkl>li>a{cursor:pointer}
.wkl>li>*::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin:-4px 0 0 -20px;background:var(--sig);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.wkl>li>a:hover::before,.wkl>li>a:focus-visible::before{opacity:1;transform:none}
.wkl>li>a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wkl>li[hidden]{display:none}
.wkl .wk-no{color:var(--mut);white-space:nowrap}
.wkl .wk-cl{display:grid;gap:5px}
.wkl .wk-cl b{font:600 clamp(19px,1.5vw,23px)/1.1 var(--f-body);letter-spacing:-.02em}
.wkl .wk-cl em{font-style:normal;color:var(--mut);font-size:10.5px}
.wkl .wk-wb{color:var(--mut);font-size:15px;line-height:1.35}
.wkl .wk-fl{display:flex;gap:4px}
.wkl .wk-fl i{display:grid;place-items:center;width:28px;height:28px;box-sizing:border-box;border:1px solid var(--ln);font-style:normal;font-size:10px;color:var(--mut)}
.wkl .wk-fl i.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.wkl .wk-st{display:flex;align-items:center;gap:9px;font-size:11px}
.wk-sg{width:9px;height:9px;flex:none;box-sizing:border-box}
.wk-sg.wk-run{background:var(--sig);animation:wkrun 1.6s steps(1) infinite}
.wk-sg.wk-bld{border:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) 0 100%/100% 50% no-repeat}
.wk-sg.wk-std{border:1px dashed var(--mut)}
@keyframes wkrun{0%,70%{opacity:1}71%,100%{opacity:.25}}
.wkl .wk-rs{display:grid;gap:4px;justify-items:end}
.wkl .wk-rs b{font:300 clamp(32px,2.8vw,44px)/.9 var(--f-body);letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wkl .wk-rs em{font-style:normal;color:var(--mut);font-size:13px;line-height:1.3;max-width:24ch}
.wkl .wk-rs.mut b{color:var(--mut)}
.wkl>li>a:hover,.wkl>li>div:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.wkfoot{margin:22px 0 0}

/* anteprima che segue il mouse (solo con il mouse) */
.wkpv{position:fixed;left:0;top:0;width:220px;aspect-ratio:4/5;z-index:30;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .2s,transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.wkpv.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wkpv .wv{margin:0;height:100%;aspect-ratio:auto;box-shadow:0 24px 60px rgba(0,0,0,.45)}

/* vista copertine */
.wkcov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px)}
.wkcov[hidden]{display:none}
.wkcov>[hidden]{display:none}
.wkcov .wc p{color:var(--mut);font-size:16px;margin:0;max-width:30ch}
.wkcov div.wc .wv{cursor:default}

/* ---- telefono e tablet ---- */
@media (max-width:1080px){
  .wkhd,.wkl>li>*{grid-template-columns:88px minmax(0,1.2fr) minmax(0,1.3fr) 104px minmax(0,.9fr)}
  .wkhd span:nth-child(4),.wkl .wk-fl{display:none}
  .wkcov{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .wkorow{grid-template-columns:1fr}
  .wkplate{width:100%;max-width:340px}
  .wkfc{grid-template-columns:1fr}
  .wkhd{display:none}
  .wkl>li>*{grid-template-columns:1fr auto;grid-template-areas:"no st" "cl cl" "wb wb" "rs rs";gap:10px 16px;padding:22px 0}
  .wkl .wk-no{grid-area:no}.wkl .wk-st{grid-area:st}.wkl .wk-cl{grid-area:cl}.wkl .wk-wb{grid-area:wb}
  .wkl .wk-rs{grid-area:rs;justify-items:start;text-align:left;margin-top:6px}
  .wkl>li>*::before{display:none}
  .wkcov{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.wk-sg.wk-run{animation:none}.wkpv{transition:none}}

/* ---- copertine e schede: copiate dalla sezione Work della home (prototipo/home.html), identiche ---- */
.wk{padding-block:clamp(96px,11vw,160px)!important}
.wkh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(36px,4vw,56px)}
.wkh h2{margin-top:14px!important}
.wkg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.wc{display:grid;gap:0;align-content:start;color:inherit;text-decoration:none}
.wv{position:relative;aspect-ratio:4/5;background:var(--c);overflow:hidden;margin-bottom:20px}
.wv{container-type:inline-size}
.art{position:absolute;left:0;top:0;width:384px;height:480px;transform-origin:0 0;transform:scale(var(--k,1));transition:scale .7s cubic-bezier(.2,.8,.2,1)}
.wc:hover .art{scale:1.035}
.wcta{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;background:#121211;color:#F4F2EC;padding:10px 14px 9px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.wcta i{width:8px;height:8px;background:var(--sig)}
.wc:hover .wcta,.wc:focus-visible .wcta{opacity:1;transform:none}
.wm{display:flex;justify-content:space-between;color:var(--mut);border-top:1px solid var(--ln);padding-top:12px}
.wc h3{font:650 clamp(22px,1.9vw,28px)/1.1 var(--f-body);letter-spacing:-.025em;margin:14px 0 6px}
.hm .wc p{color:var(--mut);font-size:16px;margin:0;max-width:30ch}
.wn{display:grid;gap:10px;justify-items:start;margin-top:24px}
.wn b{font:300 clamp(56px,5.4vw,84px)/.9 var(--f-body);letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wn span{font:400 15px/1.3 var(--f-body);color:var(--mut)}
.wc:focus-visible{outline:2px solid #2D46E0;outline-offset:6px}
.wall{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(56px,6vw,88px);padding:24px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--ln);color:inherit;text-decoration:none}
.wl{display:flex;align-items:center;gap:20px}
.wl b{font:600 clamp(28px,3vw,44px)/1 var(--f-body);letter-spacing:-.035em}
.wl .arq{width:56px;height:56px}
.wl .arq svg{left:16px;top:16px}
.wl .arq svg+svg{transform:translateX(-56px)}
.wall:hover .wl .arq svg:first-child{transform:translateX(56px)}
.a1{color:#F2E9D8;font-family:var(--f-body)}
.bm1{position:absolute;left:7%;top:6%;display:grid;gap:4px}
.bm1 b{font:700 19px/1 var(--f-body);letter-spacing:-.02em}
.bm1 span{font:400 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.wui{position:absolute;background:#F7F1E4;color:#10262E;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.u1{left:12%;top:22%;width:96%;padding:16px 18px;display:grid;gap:12px}
.wuh{display:flex;justify-content:space-between;padding-right:14%;font:400 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.wub{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.wub b{font:300 54px/.9 var(--f-body);letter-spacing:-.05em}
.wsp{display:flex;align-items:flex-end;gap:5px;height:44px;margin-right:30%}
.wsp s{display:block;width:9px;background:#1F4E5F;opacity:.85}
.wsp s:last-child{background:#E8A33D;opacity:1}
.u1 ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(16,38,46,.15)}
.u1 li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(16,38,46,.1);font:500 12.5px var(--f-body)}
.u1 em{font:400 10px var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-right:30%;white-space:nowrap}
.u1 em::before{content:"";width:7px;height:7px}
.u1 .ok::before{background:#2F7D5B}
.u1 .go::before{background:#E8A33D}
.u1 .wt::before{border:1.5px solid currentColor;width:5px;height:5px}
.u2{left:7%;bottom:7%;width:46%;padding:14px 16px;display:grid;gap:6px;background:#E8A33D;color:#10262E}
.u2 span{font:400 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.u2 b{font:600 20px/1 var(--f-body);letter-spacing:-.02em}
.u2 i{display:block;height:3px;background:rgba(16,38,46,.2)}
.u2 i s{display:block;height:100%;background:#10262E}
.a2 .wbag{position:absolute;left:14%;bottom:-6%;width:72%;filter:drop-shadow(0 30px 30px rgba(90,50,20,.22))}
.lg2{position:absolute;left:14%;right:14%;bottom:12%;top:42%;display:grid;justify-items:center;align-content:center;gap:10px;color:#7A2E1C;text-align:center}
.lg2 b{font:400 48px/.92 'Gloock',serif;letter-spacing:-.01em}
.lg2 .stp{width:34px;height:34px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font:500 15px/1 var(--f-body);margin-bottom:4px}
.lg2 .mo{font-size:9.5px;letter-spacing:.14em}
.tag2{position:absolute;right:8%;top:9%;width:74px;height:74px;border-radius:50%;background:#7A2E1C;color:#E9DCC4;display:grid;place-items:center;text-align:center;font-size:9px;letter-spacing:.1em;line-height:1.4;transform:rotate(-12deg)}
.a3{color:#14323F}
.bm3{position:absolute;left:7%;top:6%;display:flex;align-items:center;gap:9px}
.bm3 i{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;position:relative}
.bm3 i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:currentColor}
.bm3 b{font:500 19px/1 var(--f-body);letter-spacing:-.03em}
.u3{left:7%;right:-10%;top:20%;padding:16px 18px;display:grid;gap:12px;background:#FBFCFC;color:#14323F}
.wcal{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto repeat(6,26px);gap:4px;background:linear-gradient(rgba(20,50,63,.07) 1px,transparent 1px) 0 18px/100% 30px}
.wcal>span{font:400 10px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.55;padding-bottom:4px}
.wcal i{background:#DCE8EC;border-left:2px solid #6E98A8;padding:5px 6px;display:grid;align-content:start;gap:2px;overflow:hidden}
.wcal i b{font:600 11px/1 var(--f-body)}
.wcal i small{font:400 9.5px var(--f-mono);opacity:.7}
.wcal i.on{background:#14323F;border-color:#14323F;color:#FBFCFC}
.wcal i.new{background:var(--sig);border-color:#121211;color:#121211}
.u4{left:7%;bottom:8%;padding:14px 16px;display:grid;gap:6px;background:#14323F;color:#FBFCFC;width:52%}
.u4 .mo{font-size:10px;opacity:.7}
.u4 b{font:600 17px/1.1 var(--f-body);letter-spacing:-.01em}
@media (max-width:860px){.wkh{flex-direction:column;align-items:flex-start;gap:14px}.wkg{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*clamp(16px,4vw,56px));padding-inline:clamp(16px,4vw,56px);scroll-padding-inline:clamp(16px,4vw,56px);scrollbar-width:none}.wkg::-webkit-scrollbar{display:none}.wc{scroll-snap-align:start}.wall{flex-direction:column-reverse;align-items:flex-start}.wcta{display:none}}