/* =========================================================
   ITALA — V3A "PROFESSIONALE"
   Deriva dalla V3: fullwidth, blocchi contigui, quattro
   colori, titoli molto grandi. Peso spostato su coal/bone,
   arancio come punteggiatura. Nessun gradiente, nessuna foto.
   ========================================================= */

/* FONT — self-hosted, sottoinsieme latino (assets/font/).
   Copre l'italiano (Latin-1 + punteggiatura tipografica U+2000-206F);
   niente più dipendenza da fonts.googleapis.com. */
@font-face{
    font-family:'Archivo';
    font-style:normal;
    font-weight:400 800;
    font-stretch:62% 125%;
    font-display:swap;
    src:url('../font/archivo-variable.woff2') format('woff2');
}
@font-face{
    font-family:'Martian Mono';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('../font/martianmono-400.woff2') format('woff2');
}
@font-face{
    font-family:'Martian Mono';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('../font/martianmono-500.woff2') format('woff2');
}
@font-face{
    font-family:'Martian Mono';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url('../font/martianmono-700.woff2') format('woff2');
}

:root{
    --orange:#DE7B23;
    /* stesso arancio, piu' scuro: 4,6-5,0:1 su bone contro i
       2,5-2,7:1 di --orange, che sotto AA non ci arriva. E' SOLO
       per il TESTO su fondo chiaro — riempimenti, filetti, bordi e
       bottoni restano --orange. Qui lo usa il plinto della hero 07,
       che e' l'unico blocco su bone dentro la hero. */
    --orange-ink:#A35310;
    /* e l'inchiostro per l'altra carta: --bone-2 e' piu' scuro di
       --bone, e li' --orange-ink scende a 4,12:1, sotto AA. Vale
       per il testo appoggiato al FONDO DI SEZIONE (.sec--bone),
       non ai blocchi .blk--bone, che sono su --bone.
       Misurato: 4,96:1 su --bone-2, 5,55:1 su --bone. */
    --orange-ink-2:#8F4A0E;
    --steel:#474749;

    --coal:#0F0F11;
    --coal-2:#17171A;
    --coal-3:#1F1F23;
    --bone:#EDEAE4;
    --bone-2:#E2DED6;

    --on-dark:#F4F2EE;
    --on-dark-2:#A7A6A4;
    --on-light:#141416;
    --on-light-2:#5C5B58;
    --on-orange:#231204;

    --line-d:rgba(255,255,255,.13);
    --line-l:rgba(20,20,22,.15);

    --sans:'Archivo', ui-sans-serif, system-ui, sans-serif;
    --mono:'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --hdr:76px;
    --pad:clamp(20px,3.4vw,64px);

    /* opacita' del velo piatto sopra l'asset della hero.
       Col segnaposto (gia' scuro) basta poco; con il video definitivo
       si sale verso .55 e si cambia SOLO qui. */
    --hero-veil:.26;

    --ease:cubic-bezier(.16,.84,.44,1);
    --ease-2:cubic-bezier(.19,1,.22,1);

    --hero-img: url('../img/hero/hero-test-3.webp');
    --hero-img-mobile: url('../img/hero/hero-test-mobile-1.webp');
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr);interpolate-size:allow-keywords}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

body{
    margin:0;
    background:var(--coal);
    color:var(--on-dark);
    font-family:var(--sans);
    font-variation-settings:'wdth' 100,'wght' 400;
    font-size:16px;line-height:1.58;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:clip;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--orange);color:var(--on-orange)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* maschere per SplitText */
.sp-line{overflow:hidden;display:block}

/* con meno movimento le animazioni e le transizioni durano un
   istante: arrivano allo stato finale senza farsi vedere. */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}