/* ================================================================
   officine53.it — stile.css
   Un solo foglio per tutte le pagine, italiane e inglesi: le due lingue
   condividono il CSS byte per byte, così non possono divergere.
   Ogni pagina dichiara la propria sezione con una classe su <html>:
   home · carta · privacy · grazie · errore · non-trovata.
   Estratto il 02/09/2026 dai blocchi <style> inline SENZA ridisegnare:
   le sezioni ripetono regole simili (wordmark, filetto) di proposito.
   Unificarle è un lavoro a sé, non questo.
   ================================================================ */

/* ---------------- home (index.html) ---------------- */
  :root{
    --notte:#101a2e; --carbone:#16161a; --avorio:#f6f1e7; --bianco:#f2f4f8;
    --ambra:#f5b81c; --ambra-scura:#b8860b; --rosso:#ff5449; --rosso-scuro:#c62f24;
    --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    --display:'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
    --corpo:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --lato:280px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html.home{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html.home{scroll-behavior:auto}
    .home *, .home *::before, .home *::after{transition:none !important;animation:none !important}
  }
  .home body{
    background:var(--notte); color:var(--bianco);
    font:400 1rem/1.65 var(--corpo);
    overflow-x:clip;
  }
  .home a{color:inherit}
  .home a:focus-visible, .home button:focus-visible{outline:2px solid var(--ambra);outline-offset:3px}
  .home .salta{position:absolute;left:-999px;top:0;background:var(--ambra);color:var(--carbone);padding:.6rem 1rem;font:600 .8rem var(--mono);z-index:60}
  .home .salta:focus{left:.5rem;top:.5rem}

  /* ============ impianto split ============ */
  .home .layout{display:grid;grid-template-columns:var(--lato) minmax(0,1fr);min-height:100vh}

  /* ---- barra laterale ---- */
  .home .lato{background:var(--notte);border-right:1px solid rgba(242,244,248,.14)}
  .home .lato-in{
    position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:2rem 1.6rem;
  }
  .home .marchio{display:inline-block;line-height:0}
  .home .marchio svg{width:206px;max-width:100%;height:auto;display:block}
  /* selettore di lingua: sotto il marchio, sopra la navigazione; nome della lingua nella lingua stessa */
  .home .lingua{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;margin-top:.9rem;
    padding:0 .15rem;font:600 .78rem/1 var(--mono);letter-spacing:.06em;text-decoration:none;color:#9aa4b8;
    border-bottom:1px solid rgba(242,244,248,.35);transition:color .2s,border-color .2s}
  .home .lingua::before{content:"→";color:var(--ambra);margin-right:.55rem}
  .home .lingua:hover{color:var(--ambra);border-color:var(--ambra)}
  .home .lato nav{margin-top:3rem;flex:1}
  .home .lato nav ul{list-style:none;display:flex;flex-direction:column}
  .home .lato nav a{
    display:flex;gap:.8rem;align-items:baseline;text-decoration:none;
    font:600 .82rem/1 var(--mono);letter-spacing:.06em;
    padding:.95rem .2rem;border-bottom:1px solid rgba(242,244,248,.14);
    color:var(--bianco);transition:color .2s,padding-left .2s;
  }
  .home .lato nav a .n{color:var(--ambra);font-weight:600}
  .home .lato nav a:hover{color:var(--ambra);padding-left:.55rem}
  .home .lato-meta{font:400 .72rem/1.7 var(--mono);color:#9aa4b8}
  .home .lato-meta a{color:var(--bianco);text-decoration:none;border-bottom:1px solid rgba(242,244,248,.35)}
  .home .lato-meta a:hover{color:var(--ambra);border-color:var(--ambra)}
  .home .menu-btn{display:none}

  /* ============ blocchi ============ */
  .home .blocco{padding:5.5rem clamp(1.3rem,5vw,4.5rem)}
  .home .scuro{background:var(--notte);color:var(--bianco);
    --fg:var(--bianco);--muto:#9aa4b8;--acc:var(--ambra);--caldo:var(--rosso);
    --linea:rgba(242,244,248,.18);--linea-q:rgba(245,184,28,.65)}
  .home .chiaro{background:var(--avorio);color:var(--carbone);
    --fg:var(--carbone);--muto:#57513f;--acc:var(--ambra-scura);--caldo:var(--rosso-scuro);
    --linea:rgba(22,22,26,.24);--linea-q:var(--ambra-scura)}
  .home .carb{background:var(--carbone);color:var(--bianco)}
  .home .misura{max-width:66rem;margin:0 auto}

  /* quota di sezione: |—— etichetta ——| come su un disegno esecutivo */
  .home .quota{display:flex;align-items:center;gap:1.1rem;margin-bottom:2.6rem;
    font:600 .72rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--fg)}
  .home .quota::before, .home .quota::after{content:"";flex:1;height:9px;border-bottom:1px solid var(--linea-q)}
  .home .quota::before{border-left:1px solid var(--linea-q)}
  .home .quota::after{border-right:1px solid var(--linea-q)}
  /* cartiglio da tavola tecnica */
  .home .quota .cart{border:1px solid var(--linea-q);color:var(--acc);padding:.5em .75em .45em;white-space:nowrap}

  .home h2{font:800 clamp(1.55rem,3vw,2.3rem)/1.08 var(--display);
     text-transform:uppercase;letter-spacing:.06em;margin-bottom:1.4rem}
  .home .blocco p{max-width:68ch}
  .home .muto{color:var(--muto)}

  /* ============ hero: frontespizio ============ */
  /* struttura della testata de «la carta», carattere di «banco di prova»:
     wordmark centrato in livrea viva, doppio filetto ambra, poi il titolo.
     Niente tavola in apertura: lo schema vive in «come lavoriamo». */
  .home .hero{padding-top:5.5rem;text-align:center}
  .home .hero .wordmark{font:600 clamp(1.7rem,4.5vw,2.9rem)/1 var(--mono);
    color:var(--bianco);white-space:nowrap}
  .home .hero .wordmark .slash{color:var(--ambra)}
  .home .hero .wordmark .porta{color:var(--rosso)}
  .home .filetto{width:5.5rem;height:5px;border:0;background:transparent;
    border-top:1px solid var(--ambra);border-bottom:1px solid var(--ambra);
    margin:1.8rem auto}
  .home .hero h1{
    font:800 clamp(2.3rem,5.4vw,4.1rem)/1.02 var(--display);
    text-transform:uppercase;letter-spacing:.05em;color:var(--bianco);
  }
  .home .hero .payoff{font:600 clamp(.95rem,1.6vw,1.15rem)/1.5 var(--mono);color:var(--ambra);
    letter-spacing:.04em;margin:1.1rem 0 1.9rem}
  .home .hero .apertura{font-size:1.06rem;color:#c7cdd9;max-width:62ch;margin:0 auto}
  .home .hero .cta-riga{justify-content:center}
  .home .cta-riga{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
  .home .cta{display:inline-block;text-decoration:none;font:600 .85rem/1 var(--mono);
    letter-spacing:.05em;padding:.95rem 1.5rem;transition:background .2s,color .2s,border-color .2s}
  /* primaria: ambra piena + doppio filetto da disegno esecutivo (il rosso pieno resta a sala-macchine) */
  .home .cta-p{background:var(--ambra);color:var(--notte);border:1px solid var(--ambra);
    box-shadow:0 0 0 3px var(--notte),0 0 0 4px var(--ambra);
    transition:background .2s,border-color .2s,box-shadow .2s}
  .home .cta-p:hover{background:var(--bianco);border-color:var(--bianco);
    box-shadow:0 0 0 3px var(--notte),0 0 0 4px var(--bianco)}
  /* secondaria: tratteggio da tavola che in hover si «fissa» pieno — nessun viraggio ambra */
  .home .cta-s{border:1px dashed rgba(242,244,248,.6);color:var(--bianco)}
  .home .cta-s:hover{border-style:solid;border-color:var(--bianco);background:rgba(242,244,248,.08)}

  /* tavola tecnica — semplificata, in «come lavoriamo» */
  .home .tavola{margin:2.4rem 0 3rem;border:1px solid rgba(242,244,248,.18);padding:1rem 1rem .6rem}
  .home .tavola .tela{overflow-x:auto}
  .home .tavola svg{width:100%;height:auto;display:block}
  .home .tavola figcaption{font:400 .74rem/1.6 var(--mono);color:#9aa4b8;
    border-top:1px dashed rgba(242,244,248,.22);margin-top:.8rem;padding:.7rem .2rem .3rem;
    display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

  /* ============ cosa facciamo ============ */
  .home .gruppi{display:grid;gap:1.4rem;margin-top:2.8rem}
  .home .tris{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .home .gruppo{border:1px solid var(--linea);padding:1.8rem 1.9rem;position:relative;background:transparent}
  /* tacche d'angolo da piastra di riscontro */
  .home .gruppo::before, .home .gruppo::after{content:"";position:absolute;width:14px;height:14px}
  .home .gruppo::before{top:-1px;left:-1px;border-top:2px solid var(--acc);border-left:2px solid var(--acc)}
  .home .gruppo::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--acc);border-right:2px solid var(--acc)}
  .home .gruppo header{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
  .home .gruppo h3{font:800 1.25rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.08em}
  .home .gruppo .claim{font:600 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muto)}
  .home .gruppo.primo h3{font-size:1.6rem}
  .home .voci{display:grid;gap:1.15rem}
  .home .gruppo.primo .voci{grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.3rem 2.2rem}
  .home .voce h4{font:700 1rem/1.35 var(--corpo);margin-bottom:.15rem}
  .home .voce p{font-size:.94rem;color:var(--muto);max-width:52ch}

  /* ============ come lavoriamo ============ */
  /* i 5 principi come targhette dello schema, con le tacche d'angolo dei gruppi */
  .home .principi{list-style:none;margin-top:2.6rem;counter-reset:pr;
    display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .home .principi li{position:relative;border:1px solid var(--linea);padding:1.5rem 1.6rem 1.6rem}
  .home .principi li::before, .home .principi li::after{content:"";position:absolute;width:14px;height:14px}
  .home .principi li::before{top:-1px;left:-1px;border-top:2px solid var(--acc);border-left:2px solid var(--acc)}
  .home .principi li::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--acc);border-right:2px solid var(--acc)}
  .home .rif{counter-increment:pr;display:block;margin-bottom:.9rem;
    font:600 .68rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
  .home .rif::before{content:"pos. " counter(pr) " / 5"}
  .home .principi h3{font:800 1.02rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
  .home .principi p{color:var(--muto);font-size:.94rem;max-width:56ch}
  .home .chiusa{margin-top:2.4rem;max-width:62ch}
  .home .rimando{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;
    font:600 .85rem/1 var(--mono);letter-spacing:.05em;color:var(--ambra);
    text-decoration:none;border:1px solid rgba(245,184,28,.55);padding:.9rem 1.4rem;
    transition:background .2s,color .2s}
  .home .rimando:hover{background:var(--ambra);color:var(--notte)}

  /* ============ chi c'è dietro ============ */
  .home .dietro p+p{margin-top:1.15rem}
  .home .firma{margin-top:2.8rem;padding-top:1.5rem;border-top:1px dashed var(--linea);line-height:0}
  .home .firma svg{width:196px;max-width:60vw;height:auto}

  /* ============ contatti ============ */
  .home .contatti h2{margin-bottom:.9rem}
  /* recapito come campo quotato: targhetta con tacche d'angolo */
  .home .mail{position:relative;display:inline-flex;flex-direction:column;gap:.55rem;margin-top:1.9rem;
    border:1px solid var(--linea);padding:1rem 1.5rem 1.1rem;text-decoration:none;
    font:600 clamp(1.05rem,2.4vw,1.5rem)/1.2 var(--mono);color:var(--bianco);
    max-width:100%;overflow-wrap:anywhere;transition:background .2s}
  .home .mail::before, .home .mail::after{content:"";position:absolute;width:14px;height:14px}
  .home .mail::before{top:-1px;left:-1px;border-top:2px solid var(--ambra);border-left:2px solid var(--ambra)}
  .home .mail::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--ambra);border-right:2px solid var(--ambra)}
  .home .mail .eti{font:600 .66rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ambra)}
  .home .mail:hover{background:rgba(245,184,28,.09)}
  /* modulo di contatto — stessi materiali della tavola: filetti, etichette mono */
  .home .modulo{margin-top:2.8rem;max-width:44rem;display:grid;gap:1.15rem}
  .home .campo{display:grid;gap:.45rem}
  .home .campo label{font:600 .68rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ambra)}
  .home .campo input, .home .campo textarea{background:rgba(246,241,231,.04);border:1px solid rgba(242,244,248,.35);
    color:var(--bianco);font:400 1rem/1.5 var(--corpo);padding:.85rem 1rem;width:100%}
  .home .campo input:focus, .home .campo textarea:focus{outline:2px solid var(--ambra);outline-offset:2px;border-color:var(--ambra)}
  .home .campo textarea{min-height:9rem;resize:vertical}
  .home button.cta{cursor:pointer;justify-self:start}
  .home .modulo .nota{font:400 .78rem/1.7 var(--mono);color:#9aa4b8;max-width:60ch}
  .home .modulo[hidden]{display:none}
  /* campo-trappola per i bot: fuori schermo, mai compilato dagli umani */
  .home .modulo .trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* ============ footer ============ */
  .home footer.blocco{padding-top:3rem;padding-bottom:3rem}
  .home footer .misura{display:flex;flex-direction:column;gap:.4rem;
    font:400 .8rem/1.8 var(--mono);color:#9aa4b8}
  .home footer b{color:var(--bianco);font-weight:600}
  .home footer a{color:var(--bianco);text-decoration:none;border-bottom:1px solid rgba(242,244,248,.35)}
  .home footer a:hover{color:var(--ambra);border-color:var(--ambra)}
  .home footer .legge{font-size:.72rem;color:#7b8496}
  .home footer .copy{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(242,244,248,.14)}

  /* ============ mobile ============ */
  @media (max-width:920px){
    .home .layout{display:block}
    .home .lato{position:sticky;top:0;z-index:50;border-right:none;border-bottom:1px solid rgba(242,244,248,.14)}
    .home .lato-in{position:static;height:auto;flex-direction:row;align-items:center;
      justify-content:space-between;padding:.85rem 1.1rem}
    .home .marchio svg{width:158px}
    .home .lingua{margin:0 .9rem 0 auto}
    .home .menu-btn{display:inline-block;background:none;border:1px solid rgba(242,244,248,.5);
      color:var(--bianco);font:600 .78rem/1 var(--mono);letter-spacing:.14em;
      text-transform:uppercase;padding:.6rem .9rem;cursor:pointer}
    .home .menu-btn:hover{border-color:var(--ambra);color:var(--ambra)}
    .home .lato nav{position:absolute;top:100%;left:0;right:0;margin:0;background:var(--notte);
      border-bottom:1px solid rgba(242,244,248,.2);display:none;padding:.4rem 1.1rem 1rem}
    .home body.nav-aperta .lato nav{display:block}
    .home .lato-meta{display:none}
    .home .blocco{padding-top:3.6rem;padding-bottom:3.6rem}
    .home .tavola svg{min-width:640px}
  }

  /* apertura della sezione contatti: prima era un attributo style inline */
  .home .contatti .apertura{color:#c7cdd9}

/* ---------------- carta (carta.html) ---------------- */
  .carta .ritorno{
    position: absolute; top: 1.1rem; left: 1.3rem;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .78rem; letter-spacing: .06em;
    color: #f2f4f8; text-decoration: none;
    border-bottom: 1px solid rgba(242, 244, 248, .35);
    padding-bottom: .1rem;
  }
  .carta .ritorno:hover{ color: #f5b81c; border-color: #f5b81c; }
  .carta .lingua{position:absolute;top:0;right:1.3rem;display:inline-flex;align-items:center;min-height:44px;
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.78rem;letter-spacing:.06em;
    color:#f2f4f8;text-decoration:none;border-bottom:1px solid rgba(242,244,248,.35)}
  .carta .lingua:hover{color:#f5b81c;border-color:#f5b81c}
  html.carta{
    --notte: #101a2e;
    --notte-fonda: #0b1322;
    --avorio: #f5efe2;
    --avorio-chiaro: #fbf7ee;
    --inchiostro: #1c2433;
    --inchiostro-tenue: #565d6e;
    --ambra-viva: #f5b81c;   /* solo su fondo notte */
    --ambra-bruciata: #a87710; /* su avorio */
    --rosso-vivo: #ff5449;   /* solo su fondo notte */
    --rosso-carta: #b03a31;  /* su avorio */
    --linea: #e0d6bf;
    --bianco-caldo: #f6f1e4;
  }
  html.carta{ color-scheme: light; }
  .carta body{
    background: var(--avorio);
    color: var(--inchiostro);
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    font-size: 17px;
    line-height: 1.7;
  }
  .carta .mono{ font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

  /* ——— Testata notturna ——— */
  .carta header.testata{
    background: linear-gradient(180deg, var(--notte-fonda), var(--notte));
    color: var(--bianco-caldo);
    text-align: center;
    padding: 4.5rem 1.5rem 3.6rem;
  }
  .carta .wordmark{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: clamp(1.7rem, 6vw, 2.9rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--bianco-caldo);
    white-space: nowrap;
  }
  .carta .wordmark .slash{ color: var(--ambra-viva); }
  .carta .wordmark .porta{ color: var(--rosso-vivo); }
  .carta .payoff{
    margin-top: 1rem;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    color: #cfd4de;
    font-style: italic;
  }
  .carta .testata .filetto{
    width: 4.5rem; height: 2px; background: var(--ambra-viva);
    margin: 1.8rem auto 1.6rem; border: 0;
  }
  .carta .doc-label{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ambra-viva);
  }
  .carta .doc-title{
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 600;
    margin-top: 0.5rem;
    text-wrap: balance;
  }
  .carta .doc-meta{
    margin-top: 1.1rem;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8d94a5;
  }

  /* ——— Corpo documento ——— */
  .carta main{ max-width: 41rem; margin: 0 auto; padding: 3.5rem 1.4rem 5rem; }
  .carta main p{ margin-bottom: 1.15rem; }
  .carta .apertura p:first-child::first-letter{
    font-size: 3.1em; float: left; line-height: 0.85;
    padding: 0.06em 0.12em 0 0; color: var(--notte); font-weight: 600;
  }
  .carta .cerniera{ color: var(--inchiostro); }
  .carta em{ font-style: italic; }
  .carta strong{ font-weight: 600; color: var(--notte); }

  .carta .divisore{
    display: flex; align-items: center; gap: 0.9rem;
    margin: 3.2rem 0 2.2rem; border: 0;
  }
  .carta .divisore::before, .carta .divisore::after{
    content: ""; flex: 1; height: 1px; background: var(--linea);
  }
  .carta .divisore .glifo{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: var(--ambra-bruciata); font-size: 0.9rem; letter-spacing: 0.1em;
  }

  .carta h2.sezione{
    font-size: 1.6rem; font-weight: 600; color: var(--notte);
    margin: 0 0 0.4rem; text-wrap: balance;
  }
  .carta .sezione-sotto{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ambra-bruciata); margin-bottom: 1.6rem;
  }

  /* ——— Cosa facciamo ——— */
  .carta .famiglia{ margin: 2rem 0; }
  .carta .famiglia-testa{
    display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.7rem;
  }
  .carta .famiglia-nome{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--notte);
  }
  .carta .famiglia-ruolo{ font-style: italic; color: var(--inchiostro-tenue); font-size: 0.95rem; }
  .carta .voci{ list-style: none; }
  .carta .voci li{
    padding: 0.55rem 0 0.55rem 1.15rem; position: relative;
    border-bottom: 1px solid var(--linea); font-size: 0.98rem;
  }
  .carta .voci li:last-child{ border-bottom: 0; }
  .carta .voci li::before{
    content: "—"; position: absolute; left: 0; color: var(--ambra-bruciata);
  }
  .carta .voci b{ font-weight: 600; color: var(--notte); }

  /* ——— Punzoni e principi ——— */
  .carta .punzone{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.35rem; height: 2.35rem; padding: 0 0.45rem;
    border: 1.5px solid var(--ambra-bruciata); color: var(--ambra-bruciata);
    font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em;
    border-radius: 3px; flex: none;
  }
  .carta .principio{ margin: 2.7rem 0; }
  .carta .principio-testa{ display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.75rem; }
  .carta .principio-testa h3{ font-size: 1.28rem; font-weight: 600; color: var(--notte); }
  .carta .enunciato{
    font-size: 1.13rem; font-weight: 600; color: var(--notte);
    line-height: 1.5; margin-bottom: 0.9rem; text-wrap: balance;
  }
  .carta .principio p{ font-size: 1rem; }

  /* ——— Il Patto ——— */
  .carta .patto-blocco{
    background: var(--avorio-chiaro); border: 1px solid var(--linea);
    border-radius: 6px; padding: 1.5rem 1.6rem 1.2rem; margin: 1.8rem 0;
  }
  .carta .patto-testa{ display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
  .carta .patto-blocco .punzone{ min-width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }
  .carta .patto-testa h3{ font-size: 1.08rem; font-weight: 600; color: var(--notte); }
  .carta .patto-testa .per-te{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ambra-bruciata); display: block; margin-top: 0.15rem;
  }
  .carta .promesse{ list-style: none; }
  .carta .promesse li{
    position: relative; padding: 0.6rem 0 0.6rem 1.5rem;
    border-bottom: 1px solid var(--linea); font-size: 0.96rem;
  }
  .carta .promesse li:last-child{ border-bottom: 0; }
  .carta .promesse li::before{
    content: "✓"; position: absolute; left: 0; top: 0.6rem;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: var(--ambra-bruciata); font-weight: 700;
  }

  /* ——— Chiusura ——— */
  .carta .chiusura{ margin-top: 3.2rem; }
  .carta .firma-blocco{
    margin-top: 2.6rem; padding-top: 1.6rem; border-top: 2px solid var(--notte);
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap;
  }
  .carta .firma-wordmark{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 1.15rem; font-weight: 700; color: var(--notte);
  }
  .carta .firma-wordmark .slash{ color: var(--ambra-bruciata); }
  .carta .firma-wordmark .porta{ color: var(--rosso-carta); }
  .carta .firma-meta{
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--inchiostro-tenue); text-align: right;
  }

  @media print {
    .carta header.testata{ padding: 2.5rem 1rem 2rem; }
    .carta main{ padding-top: 2rem; }
    .carta .patto-blocco{ break-inside: avoid; }
    .carta .principio{ break-inside: avoid; }
  }
  @media (max-width: 480px) {
    .carta .firma-blocco{ flex-direction: column; }
    .carta .firma-meta{ text-align: left; }
  }

  /* il link «← officine53.it» è posizionato rispetto alla testata: prima era un attributo style inline */
  .carta header.testata{position:relative}

/* ---------------- privacy (privacy.html) ---------------- */
  .privacy body{background:var(--avorio);color:var(--carbone);font:400 1rem/1.7 var(--corpo)}
  .privacy header{background:var(--notte);color:var(--bianco);text-align:center;padding:2.6rem 1.3rem;position:relative}
  .privacy .ritorno{position:absolute;top:1.1rem;left:1.3rem;font:400 .78rem/1 var(--mono);letter-spacing:.06em;
    color:var(--bianco);text-decoration:none;border-bottom:1px solid rgba(242,244,248,.35);padding-bottom:.1rem}
  .privacy .ritorno:hover{color:var(--ambra);border-color:var(--ambra)}
  .privacy .lingua{position:absolute;top:0;right:1.3rem;display:inline-flex;align-items:center;min-height:44px;
    font:400 .78rem/1 var(--mono);letter-spacing:.06em;color:var(--bianco);text-decoration:none;
    border-bottom:1px solid rgba(242,244,248,.35)}
  .privacy .lingua:hover{color:var(--ambra);border-color:var(--ambra)}
  .privacy .wordmark{font:600 clamp(1.3rem,3.5vw,1.8rem)/1 var(--mono);white-space:nowrap}
  .privacy .wordmark .slash{color:var(--ambra)} .privacy .wordmark .porta{color:var(--rosso)}
  .privacy header h1{font:800 clamp(1.3rem,3.5vw,1.9rem)/1.15 var(--display);text-transform:uppercase;
    letter-spacing:.06em;margin-top:1.1rem}
  .privacy header p{font:400 .74rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#9aa4b8;margin-top:.8rem}
  .privacy main{max-width:44rem;margin:0 auto;padding:3rem 1.3rem 4rem}
  .privacy h2{font:800 1.05rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.06em;
    margin:2.4rem 0 .7rem;padding-top:.9rem;border-top:1px solid rgba(22,22,26,.18)}
  .privacy h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
  .privacy p+p{margin-top:.8rem}
  .privacy ul{margin:.6rem 0 .6rem 1.2rem}
  .privacy li+li{margin-top:.35rem}
  .privacy a{color:var(--carbone)}
  .privacy a:hover{color:var(--ambra-scura)}
  .privacy a:focus-visible{outline:2px solid var(--ambra-scura);outline-offset:2px}
  .privacy .aggiornata{margin-top:3rem;font:400 .78rem/1.7 var(--mono);color:#57513f;
    border-top:1px dashed rgba(22,22,26,.25);padding-top:1rem}

/* ---------------- grazie (grazie.html) ---------------- */
  .grazie body{background:var(--notte);color:var(--bianco);font:400 1rem/1.65 var(--corpo);
    min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem 1.3rem}
  .grazie .wordmark{font:600 clamp(1.5rem,4vw,2.2rem)/1 var(--mono);white-space:nowrap}
  .grazie .wordmark .slash{color:var(--ambra)} .grazie .wordmark .porta{color:var(--rosso)}
  .grazie .filetto{width:5.5rem;height:5px;border:0;background:transparent;
    border-top:1px solid var(--ambra);border-bottom:1px solid var(--ambra);margin:1.7rem auto}
  .grazie h1{font:800 clamp(1.6rem,4.5vw,2.6rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em}
  .grazie p{color:#c7cdd9;max-width:44ch;margin:1.1rem auto 0}
  .grazie a.ritorno{display:inline-block;margin-top:2.2rem;font:600 .85rem/1 var(--mono);letter-spacing:.05em;
    color:var(--bianco);text-decoration:none;border:1px dashed rgba(242,244,248,.6);padding:.9rem 1.4rem;
    transition:border-color .2s,background .2s}
  .grazie a.ritorno:hover{border-style:solid;border-color:var(--bianco);background:rgba(242,244,248,.08)}
  .grazie .lingua{display:inline-flex;align-items:center;min-height:44px;margin:1.4rem auto 0;
    font:600 .78rem/1 var(--mono);letter-spacing:.06em;color:#9aa4b8;text-decoration:none;
    border-bottom:1px solid rgba(242,244,248,.35)}
  .grazie .lingua:hover{color:var(--ambra);border-color:var(--ambra)}
  .grazie a.ritorno:focus-visible{outline:2px solid var(--ambra);outline-offset:3px}

/* ---------------- errore (errore.html) ---------------- */
  .errore body{background:var(--notte);color:var(--bianco);font:400 1rem/1.65 var(--corpo);
    min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem 1.3rem}
  .errore .wordmark{font:600 clamp(1.5rem,4vw,2.2rem)/1 var(--mono);white-space:nowrap}
  .errore .wordmark .slash{color:var(--ambra)} .errore .wordmark .porta{color:var(--rosso)}
  .errore .filetto{width:5.5rem;height:5px;border:0;background:transparent;
    border-top:1px solid var(--ambra);border-bottom:1px solid var(--ambra);margin:1.7rem auto}
  .errore h1{font:800 clamp(1.6rem,4.5vw,2.6rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em}
  .errore p{color:#c7cdd9;max-width:46ch;margin:1.1rem auto 0}
  .errore a{color:var(--bianco)}
  .errore a.mail{font:600 1.1rem/1 var(--mono);text-decoration:none;border-bottom:1px solid var(--ambra)}
  .errore a.mail:hover{color:var(--ambra)}
  .errore a.ritorno{display:inline-block;margin-top:2.2rem;font:600 .85rem/1 var(--mono);letter-spacing:.05em;
    color:var(--bianco);text-decoration:none;border:1px dashed rgba(242,244,248,.6);padding:.9rem 1.4rem;
    transition:border-color .2s,background .2s}
  .errore a.ritorno:hover{border-style:solid;border-color:var(--bianco);background:rgba(242,244,248,.08)}
  .errore .lingua{display:inline-flex;align-items:center;min-height:44px;margin:1.4rem auto 0;
    font:600 .78rem/1 var(--mono);letter-spacing:.06em;color:#9aa4b8;text-decoration:none;
    border-bottom:1px solid rgba(242,244,248,.35)}
  .errore .lingua:hover{color:var(--ambra);border-color:var(--ambra)}
  .errore a:focus-visible{outline:2px solid var(--ambra);outline-offset:3px}

/* ---------------- non-trovata (404.html) ---------------- */
  .non-trovata body{background:var(--notte);color:var(--bianco);font:400 1rem/1.65 var(--corpo);
    min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem 1.3rem}
  .non-trovata .wordmark{font:600 clamp(1.5rem,4vw,2.2rem)/1 var(--mono);white-space:nowrap}
  .non-trovata .wordmark .slash{color:var(--ambra)} .non-trovata .wordmark .porta{color:var(--rosso)}
  .non-trovata .filetto{width:5.5rem;height:5px;border:0;background:transparent;
    border-top:1px solid var(--ambra);border-bottom:1px solid var(--ambra);margin:1.7rem auto}
  .non-trovata .codice{font:600 .78rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ambra)}
  .non-trovata h1{font:800 clamp(1.6rem,4.5vw,2.6rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em;margin-top:.9rem}
  .non-trovata p{color:#c7cdd9;max-width:46ch;margin:1.1rem auto 0}
  .non-trovata nav{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
  .non-trovata nav a{font:600 .85rem/1 var(--mono);letter-spacing:.05em;color:var(--bianco);text-decoration:none;
    border:1px dashed rgba(242,244,248,.6);padding:.9rem 1.4rem;transition:border-color .2s,background .2s}
  .non-trovata nav a:hover{border-style:solid;border-color:var(--bianco);background:rgba(242,244,248,.08)}
  .non-trovata a:focus-visible{outline:2px solid var(--ambra);outline-offset:3px}
  /* blocco inglese: stessa pagina, seconda lingua */
  .non-trovata .en{margin-top:3rem;padding-top:2.2rem;border-top:1px dashed rgba(242,244,248,.25)}
  .non-trovata .en h2{font:800 clamp(1.3rem,3.5vw,2rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em}
