/* ============================================================
   MB · HOME 2026 — "CARTA"
   La pagina è il documento: bianco crema luminoso, inchiostro
   caldo, un solo segnale (arancio industriale). Sempre chiara.
   Font: Space Grotesk (display) · JetBrains Mono (etichette)
         · Instrument Serif (correzioni a penna)
   ============================================================ */
:root{
  --bg:#FAF8F1; --panel:#FFFFFF;
  --ink:#26251D; --dim:#756E5E; --faint:#A29A86;
  --border:#E2DCC9; --rule:#ECE7D6;
  --acc:#E8490F; --acc-hi:#FF5A1F; --acc-ink:#FFF4ED;
  --ok:#6E8A4C;
  --grain:.03; --grid:4.5%;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,ui-monospace,monospace;
  --disp:"Space Grotesk","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --maxw:1080px; --gut:clamp(18px,4.5vw,56px);
  color-scheme: light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--disp); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.04;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1em}
::selection{background:var(--acc);color:var(--acc-ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
img{max-width:100%}

/* --- texture: grana + griglia, con "torcia" che segue il mouse --- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.field,.fieldhi{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--ink) var(--grid),transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--ink) var(--grid),transparent) 1px,transparent 1px);
  background-size:44px 44px}
.fieldhi{background-image:
    linear-gradient(color-mix(in srgb,var(--acc) 30%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--acc) 30%,transparent) 1px,transparent 1px);
  opacity:0;transition:opacity .4s;
  -webkit-mask-image:radial-gradient(220px circle at var(--mx,-500px) var(--my,-500px),#000 0%,transparent 72%);
  mask-image:radial-gradient(220px circle at var(--mx,-500px) var(--my,-500px),#000 0%,transparent 72%)}
body.hasmouse .fieldhi{opacity:.8}
@media (prefers-reduced-motion:reduce){.fieldhi{display:none}}

.mono{font-family:var(--mono)}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}

.barcode{height:13px;width:88px;display:inline-block;color:var(--faint);
  background-image:repeating-linear-gradient(90deg,
    currentColor 0 1px,transparent 1px 2px,currentColor 2px 4px,
    transparent 4px 5px,currentColor 5px 7px,transparent 7px 9px,
    currentColor 9px 10px,transparent 10px 13px)}

/* ============ topbar ============ */
.topbar{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:700;text-decoration:none;font-size:15px;letter-spacing:-.01em}
.brand b{color:var(--acc)}
.brand .dom{color:var(--dim);font-weight:500}
.nav{display:flex;gap:2px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--dim);padding:7px 12px;transition:.15s}
.nav a:hover{background:var(--acc);color:var(--acc-ink)}
.nav a.cta{border:1px solid var(--ink);color:var(--ink)}
.nav a.cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:700px){.nav a.hide-sm{display:none}}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--acc)}

/* ============ hero ============ */
.hero{padding:clamp(64px,12vh,140px) 0 clamp(48px,8vh,90px)}
.hero .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.hero .eyebrow .ln{flex:1;height:1px;background:var(--rule)}
.hero h1{font-size:clamp(44px,9vw,104px);text-wrap:balance}
.hero h1 .lo{display:block;color:var(--dim);font-weight:400;font-size:.40em;letter-spacing:.01em;margin-top:12px}

/* la correzione a penna: ero ~~sono~~ */
.corr{font-family:var(--serif);font-style:italic;color:var(--acc);display:inline-block;
  opacity:0;transform:translateY(8px) rotate(-6deg);transition:opacity .35s,transform .35s}
body.loaded .corr{opacity:1;transform:rotate(-3deg)}
.strk{position:relative;display:inline-block}
.strk::after{content:"";position:absolute;left:-2%;top:52%;height:3px;width:0;
  background:var(--acc);transform:rotate(-1.5deg);transition:width .45s cubic-bezier(.7,0,.3,1)}
body.loaded .strk::after{width:104%}
@media (prefers-reduced-motion:reduce){
  .corr{opacity:1;transform:rotate(-3deg);transition:none}
  .strk::after{width:104%;transition:none}
}

.beepline{margin:34px 0 6px;font-size:clamp(20px,3.2vw,30px);font-weight:600;letter-spacing:-.01em}
.beep{display:inline-block;cursor:pointer;user-select:none;color:var(--acc);
  border-bottom:2px solid var(--acc);padding:0 2px;background:none;border-top:none;border-left:none;border-right:none;
  font:inherit;transition:transform .12s}
.beep:active{transform:translateY(-6px)}
.beep.boing{animation:boing .28s}
@keyframes boing{40%{transform:translateY(-8px) scale(1.06)}100%{transform:none}}
.beephint{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:16px;margin-left:10px}
.beepmsg{font-family:var(--serif);font-style:italic;color:var(--acc);font-size:17px;min-height:26px;margin:0 0 4px;
  opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s}
.beepmsg.show{opacity:1;transform:none}
.hero .intro{max-width:58ch;color:var(--dim);font-size:18px;margin-top:16px}
.hero .cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--ink);transition:.15s;color:var(--ink);background:none;cursor:pointer;font-weight:500}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.hero .meta-strip{display:flex;gap:22px;margin-top:56px;padding-top:18px;border-top:1px solid var(--rule);flex-wrap:wrap;align-items:center}
.hero .meta-strip .tag{letter-spacing:.14em}
.hero .meta-strip .ln{flex:1;height:1px;background:var(--rule)}

/* entrata hero in sequenza */
.st1,.st2,.st3,.st4,.st5{opacity:0;transform:translateY(12px);
  animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards}
.st2{animation-delay:.12s}.st3{animation-delay:.24s}.st4{animation-delay:.36s}.st5{animation-delay:.48s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.st1,.st2,.st3,.st4,.st5{opacity:1;transform:none;animation:none}}

/* ============ sezioni ============ */
section{padding:clamp(44px,7vh,84px) 0;border-top:1px solid var(--rule)}
section.hero{border-top:none}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:36px}
.sec-head h2{font-size:clamp(26px,4vw,40px)}
.sec-head .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-align:right}
.sec-head .k a{color:var(--acc);text-decoration:none}
.sec-head .k a:hover{text-decoration:underline}

/* cosa faccio */
.fare{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
@media (max-width:760px){.fare{grid-template-columns:1fr}}
.fa{padding:26px 26px 26px 0;border-bottom:1px solid var(--border);display:flex;gap:18px}
.fa .dotno{font-family:var(--mono);font-size:11px;color:var(--acc);padding-top:6px;white-space:nowrap}
.fa h3{font-size:19px;margin-bottom:6px}
.fa p{color:var(--dim);font-size:15.5px;margin-bottom:8px}
.fa .t{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint)}

/* progetti */
.projects{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
@media (max-width:760px){.projects{grid-template-columns:1fr}}
.card{background:var(--panel);padding:26px;display:block;text-decoration:none;position:relative;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--acc);z-index:3}
.card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.card .st{display:inline-flex;align-items:center;gap:6px}
.card .led{width:7px;height:7px;background:var(--ok);display:inline-block}
.card .st.wip .led{background:var(--acc)}
.card h3{font-size:21px;margin-bottom:8px}
.card p{color:var(--dim);font-size:15px;margin:0}
.card .chips{margin-top:16px;display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--border);padding:3px 8px;color:var(--dim)}
.more-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--border);border-top:none;padding:16px 26px;color:var(--dim);font-size:15px;background:var(--panel)}
.more-row a{color:var(--acc);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.more-row a:hover{text-decoration:underline}

/* blog */
.log{border-top:1px solid var(--border)}
.entry{display:grid;grid-template-columns:86px 1fr auto;gap:18px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--border);text-decoration:none;transition:.15s}
.entry:hover{padding-left:10px}
.entry:hover .ttl{color:var(--acc)}
.entry .date{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.entry .ttl{font-weight:600;font-size:17px;transition:color .15s}
.entry .kind{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.08em;white-space:nowrap}
@media (max-width:640px){.entry{grid-template-columns:70px 1fr}.entry .kind{display:none}}

/* contatto */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media (max-width:760px){.contact{grid-template-columns:1fr}}
.contact .big{font-size:clamp(30px,5vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0 0 18px}
.contact .big a{text-decoration:none;border-bottom:3px solid var(--acc)}
.contact .big a:hover{color:var(--acc)}
.contact p.note{color:var(--dim);max-width:44ch}
.klist{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--dim)}
/* rientro sospeso: le righe che vanno a capo si allineano dopo l'etichetta */
.klist>div{padding:7px 0 7px 110px;text-indent:-110px}
.klist a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border)}
.klist a:hover{color:var(--acc);border-color:var(--acc)}
.klist .k{display:inline-block;width:110px;text-indent:0;color:var(--faint);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}

/* footer */
footer{border-top:1px solid var(--border);padding:26px 0 40px}
.colophon{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ============ GPT Ask Widget — rivestito per il design "carta" ============
   Il widget (/tools/gpt-ask/) inietta i suoi stili di default: qui li
   sovrascriviamo via ID (vince sulle classi). Risolve anche le icone
   Font Awesome mancanti (il sito non carica più FA): icona chip nascosta,
   freccia "→" sul bottone invio via ::before. */
#gpt-ask-mini{left:auto;right:18px;bottom:18px;transform:none}
#gpt-ask-chip{background:var(--panel);color:var(--ink);border:1px solid var(--ink);border-radius:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:11px 16px;box-shadow:3px 3px 0 var(--border)}
#gpt-ask-chip:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);box-shadow:3px 3px 0 var(--border)}
#gpt-ask-chip i{display:none}
#gpt-ask-box{background:var(--panel);border:1px solid var(--ink);border-radius:0;box-shadow:5px 5px 0 var(--border)}
#gpt-ask-input{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:0;font-family:var(--disp);font-size:14px}
#gpt-ask-input:focus{border-color:var(--acc);background:var(--panel)}
#gpt-ask-input::placeholder{color:var(--faint)}
#gpt-ask-send{background:var(--ink);color:var(--bg);border-radius:0}
#gpt-ask-send:hover{background:var(--acc);color:var(--acc-ink)}
#gpt-ask-send i::before{content:"→";font-style:normal;font-size:15px}
#gpt-ask-close{color:var(--dim)}
#gpt-ask-close:hover{color:var(--ink)}
#gpt-ask-mini .gpt-ask-poweredby{border-top:1px solid var(--border)}
#gpt-ask-mini .gpt-ask-poweredby a{color:var(--faint)}
#gpt-ask-mini .gpt-ask-poweredby a:hover{color:var(--acc)}
@media (max-width:700px){#gpt-ask-mini{right:12px;bottom:12px}}

/* ============ cookie banner — consenso GTM, stile carta ============
   In basso a sinistra (il widget GPT Ask sta a destra). Il JS che lo
   genera è in home.js: nomi cookie ed evento dataLayer sono legati
   al contenitore GTM, non rinominarli. */
.ck-backdrop{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(4px)}
.ck-card{background:var(--panel);border:1px solid var(--ink);box-shadow:6px 6px 0 var(--acc);
  width:min(440px,100%);padding:22px 24px}
.ck-backdrop[hidden],.ck-float[hidden]{display:none}
.ck-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ck-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ck-title b{color:var(--acc);font-weight:500}
.ck-close{background:none;border:none;cursor:pointer;color:var(--dim);font-size:20px;line-height:1;padding:2px 6px}
.ck-close:hover{color:var(--ink)}
.ck-text{font-size:14px;color:var(--dim);line-height:1.55;margin:0 0 14px}
.ck-dim{color:var(--faint)}
.ck-opt{display:flex;gap:10px;align-items:baseline;font-size:13.5px;color:var(--ink);
  padding:7px 0;border-top:1px solid var(--rule);cursor:pointer}
.ck-opt input{accent-color:var(--acc);flex-shrink:0;transform:translateY(1px);cursor:pointer}
.ck-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ck-btns .btn{padding:10px 13px;font-size:10.5px}
.ck-btns .ck-min{border-color:var(--border);color:var(--dim)}
.ck-float{position:fixed;left:18px;bottom:18px;z-index:99998;cursor:pointer;
  background:var(--panel);color:var(--dim);border:1px solid var(--border);border-radius:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:9px 13px;box-shadow:3px 3px 0 var(--border);transition:.15s}
.ck-float:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:700px){.ck-card,.ck-float{left:12px;bottom:12px}}

/* reveal — attivo solo se c'è JS (html.js), altrimenti tutto visibile */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
html.js .rv.in{opacity:1;transform:none}
html:not(.js) .corr{opacity:1;transform:rotate(-3deg)}
html:not(.js) .strk::after{width:104%}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}.beep.boing{animation:none}}