/* Standard ESSERCI «Manifesto, gradiente» in versione a fondo scuro, per gabrieleaprile.com (14/10/2026).
   Stessi font, stesse campiture e stesso gradiente del riferimento chiaro; qui l'Inchiostro fa da carta.
   Valori di partenza: _SHARED/skills/stile-esserci-pagine.md
   Questo foglio porta token, font e componenti comuni. Le regole di pagina stanno nelle singole pagine. */

/* ---- font, serviti dal sito (niente chiamate a Google) ---- */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lekton';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lekton-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lekton';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lekton-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lekton';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/lekton-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lekton';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/lekton-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  /* colori del marchio: non cambiano col tema */
  --carta:#FFFFFF; --inchiostro:#17143A; --inchiostro-2:#4B4868;
  --indaco:#3402AC; --acqua:#49D9D7; --rosa:#F8CEFB;
  --grad:linear-gradient(105deg,#7C3AED 0%,#4F46E5 46%,#0891B2 100%);          /* bottone principale */
  /* tema scuro: l'Inchiostro portato al buio fa da pagina, l'Inchiostro pieno fa da scheda */
  --fondo:#0B0920; --fondo-2:#110F2B; --scheda:#17143A; --filo:#2D2957;
  --testo:#FFFFFF; --testo-2:#B8B5D1; --testo-3:#8985AB;
  --accento:#49D9D7;                                                           /* asterischi, link, segni piccoli */
  --grad-testo:linear-gradient(105deg,#A78BFA 0%,#818CF8 46%,#22D3EE 100%);    /* lo stesso gradiente, schiarito per leggersi sul buio */
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Lekton',ui-monospace,'Courier New',monospace;
  /* bordi arrotondati: richiesta di Gabriele del 14/10/2026 sulla landing HyperHead */
  --r-sm:10px; --r:16px; --r-lg:24px;
  --ast:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='4.2' fill='none'%3E%3Cpath d='M12 1.5v21M2.9 6.75l18.2 10.5M2.9 17.25l18.2-10.5'/%3E%3C/g%3E%3C/svg%3E");
  --ast-indaco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%233402AC' stroke-width='4.2' fill='none'%3E%3Cpath d='M12 1.5v21M2.9 6.75l18.2 10.5M2.9 17.25l18.2-10.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* lettura chiara (blog e pagine legali): è il Manifesto così com'è nato */
html.light{
  color-scheme:light;
  --fondo:#FFFFFF; --fondo-2:#F3F2F8; --scheda:#FFFFFF; --filo:#D9D7E6;
  --testo:#17143A; --testo-2:#4B4868; --testo-3:#6B6889;
  --accento:#3402AC;
  --grad-testo:linear-gradient(105deg,#7C3AED 0%,#4F46E5 46%,#0891B2 100%);
}

html{scrollbar-width:thin;scrollbar-color:var(--filo) var(--fondo)}
html,body{background:var(--fondo);color:var(--testo);font-family:var(--sans)}
button,input,select,textarea{font-family:var(--sans)}
::selection{background:var(--acqua);color:var(--inchiostro)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accento);outline-offset:3px;border-radius:6px}

/* ---- titoli e parola chiave ---- */
.disp{font-family:var(--sans);font-weight:620;letter-spacing:-.03em}
.gradtx{background:var(--grad-testo);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- asterisco: il segno ricorrente. Prende il colore del testo in cui sta ---- */
.ast{display:inline-block;flex:none;width:.95em;height:.95em;vertical-align:-.12em;background:currentColor;
  -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat}

/* ---- occhiello: Lekton maiuscolo spaziato, con l'asterisco davanti ---- */
.occhiello{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:400;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--testo-2);line-height:1.4}
.occhiello::before{content:'';flex:none;width:15px;height:15px;background:var(--accento);
  -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat}
.occhiello.nudo::before{content:none}

/* ---- bottoni ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:60px;padding:12px 26px;
  font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.2;text-decoration:none;
  border-radius:var(--r);border:0;cursor:pointer;transition:transform .3s cubic-bezier(.19,1,.22,1),filter .25s,background .25s,color .25s}
/* principale: gradiente, con l'asterisco indaco nel tondo rosa a destra del testo */
.btn.primary,.btn.scuro{padding:12px 12px 12px 24px;color:#fff}
.btn.primary{background:var(--grad)}
.btn.primary::after,.btn.scuro::after{content:'';flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--rosa) var(--ast-indaco) center/52% no-repeat;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.primary:hover::after,.btn.scuro:hover::after{transform:rotate(60deg)}
/* sulle campiture Acqua e Rosa il bottone è Inchiostro pieno: il gradiente lì sopra si impasta */
.btn.scuro{background:var(--inchiostro)}
.btn.scuro:hover{background:var(--indaco)}
/* secondario: solo bordo */
.btn.ghost{border:1.5px solid var(--testo);color:var(--testo);background:transparent}
.btn.ghost:hover{background:var(--testo);color:var(--fondo)}
.btn.piccolo{min-height:44px;font-size:15px;gap:12px;padding:8px 9px 8px 16px;border-radius:12px}
.btn.piccolo::after{width:28px;height:28px}

/* ---- barra in alto: logotipo a sinistra, bottone col gradiente a destra ---- */
nav.barra{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px 44px}
/* velo dietro la barra: quando sotto passano le campiture chiare, logotipo e voci restano leggibili */
nav.barra::before{content:'';position:absolute;left:0;right:0;top:0;height:160%;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,32,.88),rgba(11,9,32,.5) 55%,transparent)}
nav.barra .logotipo{display:block;line-height:0;position:relative}
nav.barra .logotipo img{height:46px;width:auto;display:block}
nav.barra .links{position:relative;display:flex;gap:28px;align-items:center}
nav.barra .links a:not(.btn){font-family:var(--mono);font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:color .25s}
nav.barra .links a:not(.btn):hover{color:var(--acqua)}
/* nella lettura chiara la barra diventa una fascia Inchiostro: il logotipo è disegnato per il buio */
html.light nav.barra{background:var(--inchiostro)}
html.light nav.barra::before{content:none}
@media(max-width:900px){nav.barra{padding:16px 20px}nav.barra .logotipo img{height:36px}}

/* ---- grana pellicola ---- */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:60;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}30%{transform:translate(3%,-4%)}50%{transform:translate(-7%,5%)}70%{transform:translate(6%,8%)}90%{transform:translate(-3%,3%)}}
html.light .grain{opacity:.02}

/* ---- schede video (home e portfolio) ---- */
.etichetta{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.badge{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--inchiostro);background:var(--rosa);border-radius:999px;padding:7px 13px 6px;line-height:1}
.play{position:absolute;right:14px;bottom:14px;z-index:2;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;padding-left:3px;color:#fff;background:var(--indaco);transition:background .3s,color .3s,transform .4s cubic-bezier(.19,1,.22,1)}

/* ---- bottone tondo del tema (blog e pagine legali) ---- */
#themeToggle{position:fixed;right:22px;bottom:22px;z-index:70;width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1px solid var(--filo);background:var(--scheda);font-size:21px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .3s,border-color .3s}
#themeToggle:hover{transform:translateY(-3px);border-color:var(--accento)}

@media(prefers-reduced-motion:reduce){
  .grain{animation:none}
  .btn,.btn::after{transition:none}
}