/* ============================================================
   AVOKE — pagina Lavori: tre proposte (A «Muro», B «Fascia», C «Carte»)
   Parti comuni. Il design system è quello del sito (style.css):
   qui stanno solo i pezzi nuovi della pagina Lavori. Caso: Studio Viola.
   ============================================================ */
:root{--viola:#3d0a85;--viola-chiaro:#b9a6dd;--carta:#F5EFE7}
body[data-page="lavori"]{--page-hue:-10deg}

/* I titoloni: stessa Mona Sans del sito, spinta al peso massimo */
.tit{font-family:var(--font-display);font-weight:800;letter-spacing:-.06em;line-height:.8;text-transform:uppercase;text-wrap:nowrap}
/* la parola «in ombra»: piena e appena accennata (il contorno, su questo carattere, incrocia i tratti dentro le lettere) */
.tit--filo{color:rgba(245,239,231,.09)}
.punto{color:var(--ember)}

/* Filtri per strumento (uno alla volta) e legenda */
.filtri-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
.filtri{display:flex;flex-wrap:wrap;gap:8px}
.filtro{
  font-size:14.5px;font-weight:500;padding:11px 20px;border-radius:999px;color:var(--ink-2);
  border:1px solid var(--line);transition:background .35s var(--ease),color .35s,border-color .35s;
}
.filtro:hover{border-color:rgba(245,239,231,.4);color:var(--ink)}
.filtro[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.legenda{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.legenda span{display:inline-flex;align-items:center;gap:8px}
.legenda i{width:22px;height:10px;border-radius:999px;display:inline-block;background:var(--ember)}
.legenda i.no{background:transparent;border:1px dashed rgba(245,239,231,.5)}
.vuoto{padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink-2);font-size:clamp(18px,1.8vw,24px)}
[hidden]{display:none!important}

/* I quattro strumenti come segni: pieno = usato, tratteggiato = escluso (come «Quando non serve» in Home) */
.segni{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.segno{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 13px;border-radius:999px;border:1px solid var(--ember);background:var(--ember);color:#fff;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.segno b{font-weight:500;opacity:.75}
.segno--no{background:transparent;border:1px dashed rgba(245,239,231,.42);color:var(--mute)}

/* Didascalie: ogni immagine ha la sua */
.did{font-size:14.5px;line-height:1.45;color:var(--ink-2);max-width:44ch}
.did b{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:6px}

/* Una finestra di browser: dentro, la pagina vera scorre mentre scorri tu */
.finestra{border-radius:16px;overflow:clip;background:#15100c;border:1px solid rgba(255,252,248,.16);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.finestra__barra{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:rgba(255,250,244,.07);border-bottom:1px solid rgba(255,252,248,.1)}
.finestra__barra i{width:9px;height:9px;border-radius:50%;background:rgba(245,239,231,.28)}
.finestra__barra span{margin-left:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--mute)}
.finestra__vista{position:relative;overflow:clip;aspect-ratio:16/10;background:#fff}
.finestra__vista img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;transform:translate3d(0,calc(var(--v,0) * -1 * min(100% - var(--vista-h,0px),105vh)),0);will-change:transform}

/* Tavole e stampe del lavoro: proporzioni native, mai stirate */
.pezzo{margin:0;display:grid;gap:14px;align-content:start}
.pezzo img,.pezzo video{width:100%;height:auto;display:block;border-radius:14px;background:#fff}
.logo-prima,.logo-dopo{display:grid;place-items:center;aspect-ratio:16/10;border-radius:14px}
.logo-prima{background:#fff}
.logo-prima img{width:46%;height:auto}
.logo-dopo{background:var(--viola)}
.logo-dopo img{width:62%;height:auto}

/* Sintesi, escluso, voce del cliente */
.sintesi{list-style:none;border-top:1px solid var(--line)}
.sintesi li{display:grid;grid-template-columns:minmax(110px,.32fr) 1fr;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.sintesi b{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}
.sintesi span{font-size:clamp(17px,1.5vw,21px);line-height:1.35;color:var(--ink)}
.escluso{border:1px dashed rgba(245,239,231,.42);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,36px);display:grid;gap:12px}
.escluso h3{font-size:clamp(22px,2.2vw,30px);line-height:1.08}
.escluso p{color:var(--ink-2);font-size:16px;line-height:1.55}
.voce{margin:0;display:grid;gap:18px}
.voce p{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;font-size:clamp(22px,2.5vw,38px);line-height:1.16;max-width:26ch;text-wrap:balance}
.voce footer{all:unset;display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.vai{display:inline-flex;align-items:center;gap:10px}

/* Etichetta di lavoro in basso: quale proposta stai guardando (si toglie con la pagina vera) */
.prova{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;display:flex;gap:4px;align-items:center;
  padding:5px;border-radius:999px;background:rgba(10,8,6,.86);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.prova a{padding:8px 13px;border-radius:999px;color:var(--mute);white-space:nowrap}
.prova a:hover{color:var(--ink)}
.prova a[aria-current="page"]{background:var(--ember);color:#fff}

@media(max-width:760px){
  .sintesi li{grid-template-columns:1fr;gap:6px}
  .prova a{padding:8px 10px}
  .prova a span{display:none}
}

/* ---------- La pagina di scelta (lavori.html, finché la proposta non è scelta) ---------- */
.scelta{padding-top:calc(var(--nav-h) + clamp(40px,8vh,96px))}
.scelta h1{font-size:clamp(40px,7vw,120px);font-weight:700;letter-spacing:-.06em;line-height:.9}
.scelta .lead{margin-top:22px}
.scelta__righe{list-style:none;margin-top:clamp(30px,6vh,70px);border-top:1px solid var(--line)}
.scelta__righe a{display:grid;grid-template-columns:auto minmax(0,.7fr) minmax(0,1.3fr) auto;gap:clamp(16px,3vw,54px);align-items:center;padding:clamp(22px,3.4vh,40px) 6px;border-bottom:1px solid var(--line-soft);transition:background .4s var(--ease)}
.scelta__righe a:hover{background:rgba(255,250,244,.04)}
.scelta__righe b{font-family:var(--font-display);font-weight:800;letter-spacing:-.06em;font-size:clamp(54px,8vw,130px);line-height:.8;color:var(--ember)}
.scelta__righe h2{font-size:clamp(26px,3.4vw,54px);line-height:1}
.scelta__righe p{color:var(--ink-2);font-size:16px;line-height:1.5;max-width:60ch}
.scelta__righe svg{color:var(--ember);transition:transform .35s var(--ease)}
.scelta__righe a:hover svg{transform:translate(3px,-3px)}
@media(max-width:860px){.scelta__righe a{grid-template-columns:auto 1fr}.scelta__righe p{grid-column:1/-1}.scelta__righe svg{display:none}}