/* ============================================================
   Raffaele Filannino: identità grafica propria.
   Idea: il foglio da progetto di chi costruisce. Carta chiara
   millimetrata (griglia blu tenue), titoli in Space Grotesk,
   etichette monospazio come timbri leggermente storti, ombre
   piene (niente sfumature), una sola evidenziatura gialla da
   marker sulle parole che contano.
   Struttura e testi restano quelli collaudati del riferimento.
   ============================================================ */

:root{
  --carta:   #f6f3ec;               /* fondo carta */
  --griglia: rgba(29,78,216,.07);   /* righe millimetrate */
  --bianco:  #ffffff;
  --ink:     #14181d;               /* inchiostro */
  --muted:   #565e68;
  --muted-2: #3d434b;
  --blu:     #1d4ed8;               /* china blu da progetto */
  --verde:   #0a7a4b;
  --grigio:  #6b7280;
  --giallo:  #ffd60a;               /* evidenziatore */
  --giallo-c:#fff8d9;               /* giallo carta, per la nota */

  --wrap:    980px;
  --read:    660px;
  --radius:  6px;
  --bordo:   2px solid var(--ink);

  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --testata: "Space Grotesk", var(--sans);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

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

/* html e body stesso colore di base: altrimenti su mobile, durante
   l'overscroll, si vede una striscia di colore diverso dietro la pagina. */
html{
  background:var(--carta);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:76px;
}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  /* carta millimetrata: due serie di righe sottili sopra il fondo carta */
  background:
    linear-gradient(var(--griglia) 1px, transparent 1px),
    linear-gradient(90deg, var(--griglia) 1px, transparent 1px),
    var(--carta);
  background-size:26px 26px, 26px 26px, auto;
}

::selection{ background:var(--giallo); color:var(--ink); }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--blu); outline-offset:2px; }

h1,h2,h3{
  margin:0 0 .45em;
  font-family:var(--testata);
  font-weight:700;
  color:var(--ink);
}
h1{ font-size:1.8rem;  line-height:1.18; letter-spacing:-.025em; }
h2{ font-size:1.4rem;  line-height:1.22; letter-spacing:-.015em; }
h3{ font-size:1.05rem; line-height:1.35; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{
  width:100%; max-width:var(--wrap);
  margin:0 auto; padding:0 20px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff;
  padding:10px 16px; z-index:100;
}
.skip:focus{ left:0; }

/* ---------- Evidenziatore giallo (la firma della pagina) ---------- */
.evid{
  background:linear-gradient(104deg,
    transparent 1.5%, var(--giallo) 3%, var(--giallo) 97%, transparent 98.5%);
  padding:.04em .14em; margin:0 -.06em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ---------- Header ---------- */
/* Su telefono l'intestazione è alta tre righe: se restasse incollata in
   alto mangerebbe mezzo schermo. Scorre via; si fissa solo da tablet in su. */
.site-header{
  background:var(--carta);
  border-bottom:var(--bordo);
  position:static; z-index:40;
}
.header-in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 18px;
  padding-top:12px; padding-bottom:12px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:700; font-size:.95rem;
  font-family:var(--testata); letter-spacing:-.01em;
}
.brand-mark{
  display:grid; place-items:center;
  width:24px; height:24px; border-radius:5px;
  background:var(--giallo); color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  font-size:.72rem; font-weight:700;
}
.nav{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  width:100%;
}
.nav a{
  text-decoration:none; color:var(--muted-2);
  font-size:.82rem;
}
.nav a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.nav .nav-on{
  color:var(--carta); background:var(--ink);
  padding:5px 12px; border-radius:4px;
  font-weight:600;
  box-shadow:2px 2px 0 var(--giallo);
}
.nav .nav-on:hover{ color:#fff; text-decoration:none; }

/* ---------- Sezioni ---------- */
main{ padding:36px 0 10px; counter-reset:sez; }

main > section{
  width:100%; max-width:var(--wrap);
  margin:0 auto 48px;
  padding:0 20px;
}
main > section.reading > *,
main > section.reading .cta{ max-width:var(--read); }

/* Numero di sezione da tavola tecnica sopra ogni titolo */
main h2::before{
  counter-increment:sez;
  content:"0" counter(sez);
  display:block;
  font-family:var(--mono);
  font-size:.72rem; font-weight:600;
  letter-spacing:.08em;
  color:var(--blu);
  margin-bottom:.5em;
}

.sub{
  color:var(--muted);
  font-size:.95rem;
  margin-top:-.2em; margin-bottom:1.5em;
  max-width:var(--read);
}

/* ---------- Etichette monospazio ---------- */
.tag{
  font-family:var(--mono);
  font-size:.74rem; font-weight:600;
  letter-spacing:.02em;
  margin:0 0 .6em;
}
.tag-viola{ color:var(--blu); }
.tag-verde{ color:var(--verde); }
.dot{
  display:inline-block; vertical-align:middle;
  width:8px; height:8px; border-radius:2px;
  background:var(--giallo);
  border:1.5px solid var(--ink);
  margin:-2px 7px 0 0;
}

/* Nelle schede l'etichetta diventa un timbro storto */
.card .tag{
  display:inline-block;
  background:var(--bianco);
  border:1.5px solid currentColor;
  border-radius:4px;
  padding:3px 10px;
  transform:rotate(-1.6deg);
}
.grid > .card:nth-child(2) .tag{ transform:rotate(1.2deg); }
.grid > .card:nth-child(3) .tag{ transform:rotate(-.8deg); }

/* ---------- Hero ---------- */
h1 + .lead{ margin-top:.9em; }
.lead{ color:var(--muted-2); font-size:1.02rem; }
.hl{ color:var(--ink); font-weight:600; }

/* La nota diventa un post-it fermato sul foglio */
.note{
  background:var(--giallo-c);
  border:var(--bordo);
  border-radius:var(--radius);
  box-shadow:5px 5px 0 rgba(20,24,29,.85);
  padding:15px 20px;
  color:var(--muted-2);
  font-size:.92rem;
  margin-top:10px;
}

/* ---------- Bottoni ---------- */
.btn-row{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:22px 0;
}
.btn{
  display:inline-block;
  background:var(--ink); color:#fff;
  border:var(--bordo);
  border-radius:var(--radius);
  padding:11px 21px;
  font-size:.875rem; font-weight:600;
  text-decoration:none;
  box-shadow:4px 4px 0 var(--giallo);
  transition:transform .12s ease, box-shadow .12s ease;
  max-width:100%; overflow-wrap:anywhere;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--giallo); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--giallo); }
.btn-2{
  background:var(--bianco); color:var(--ink);
  box-shadow:4px 4px 0 rgba(29,78,216,.35);
}
.btn-2:hover{ box-shadow:2px 2px 0 rgba(29,78,216,.35); }
.btn-2:active{ box-shadow:0 0 0 rgba(29,78,216,.35); }

/* ---------- Griglie e schede ---------- */
.grid{ display:grid; gap:18px; }

.card{
  background:var(--bianco);
  border:var(--bordo);
  border-radius:var(--radius);
  box-shadow:5px 5px 0 rgba(29,78,216,.16);
  padding:20px 22px;
}
.card-verde { box-shadow:5px 5px 0 rgba(10,122,75,.18); }
.card-grigio{ box-shadow:5px 5px 0 rgba(107,114,128,.22); }

.card h3{ margin-bottom:.5em; }
.card p{ color:var(--muted); font-size:.92rem; line-height:1.65; }

.card ul{
  list-style:none;
  margin:.9em 0 0; padding:0;
}
.card ul li{
  position:relative;
  padding-left:17px;
  margin-bottom:.5em;
  font-size:.88rem;
  color:var(--muted-2);
  line-height:1.55;
}
.card ul li::before{
  content:"";
  position:absolute; left:0; top:.58em;
  width:6px; height:6px; border-radius:1px;
  background:var(--blu);
}
.card ul.bullets-verde  li::before{ background:var(--verde); }
.card ul.bullets-grigio li::before{ background:var(--grigio); }
.bullets{ margin-top:.2em; }

.link-out{ margin-top:1em; }
.link-out a{
  font-family:var(--mono);
  color:var(--ink);
  font-size:.84rem; font-weight:600;
  text-decoration:none;
  border-bottom:2px solid var(--giallo);
  padding-bottom:1px;
}
.link-out a:hover{ background:var(--giallo); border-bottom-color:var(--ink); }
.card-verde .link-out a{ border-bottom-color:var(--verde); }
.card-verde .link-out a:hover{ background:var(--giallo); border-bottom-color:var(--ink); }

/* ---------- Riquadro finale ---------- */
.cta{
  background:var(--bianco);
  border:var(--bordo);
  border-radius:var(--radius);
  box-shadow:7px 7px 0 var(--giallo);
  padding:24px 24px 22px;
}
.cta h2{ font-size:1.25rem; }
.cta p{ color:var(--muted); font-size:.95rem; }
.cta .btn-row{ margin-bottom:.6em; }
.micro{ font-size:.8rem; color:var(--muted); }

/* ---------- Footer: blocco d'inchiostro ---------- */
.site-footer{
  background:var(--ink);
  color:#aeb6c0;
  margin-top:56px;
  padding:26px 0 34px;
  font-size:.85rem;
}
.foot-nav{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin-bottom:.8em;
}
.foot-nav a{ color:#e9e6dd; text-decoration:none; }
.foot-nav a:hover{
  color:var(--giallo);
  text-decoration:underline; text-underline-offset:3px;
}
.foot-legal{ font-size:.8rem; color:#8b93a0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}

/* ============================================================
   Da tablet in su
   ============================================================ */
@media (min-width:760px){
  .site-header{ position:sticky; top:0; }
  h1{ font-size:2.5rem; }
  h2{ font-size:1.75rem; }
  main{ padding-top:56px; }
  main > section{ margin-bottom:70px; }
  .lead{ font-size:1.07rem; }
  .grid{ gap:20px; }
  .grid-2{ grid-template-columns:1fr 1fr; }
  .header-in{ flex-wrap:nowrap; }
  .nav{ width:auto; margin-left:auto; justify-content:flex-end; }
  .nav a{ font-size:.85rem; }
  .cta{ padding:28px 30px 26px; }
}

@media (min-width:980px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
}