/* ==========================================================
   VARIANTE "ORGANICA" - stessi colori, impaginazione più mossa.
   Si carica dopo style.css e ne sovrascrive solo alcune parti.
   ========================================================== */

:root{ --red-d:#6e0e0e; --red:#b3202a; --red-l:#e0493a; }

body{
  background:
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(184,100,43,.10), transparent 70%),
    radial-gradient(ellipse 50% 35% at 0% 70%, rgba(31,95,122,.08), transparent 70%),
    var(--sand);
}

/* ---------- header: logo più presente, voce attiva sottolineata a pennellata ---------- */
.site-header{background:rgba(255,253,249,.92);backdrop-filter:blur(6px);border-bottom:0;box-shadow:0 1px 0 var(--line)}
.menu a[aria-current]{background:none;color:var(--red);position:relative}
.menu a[aria-current]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:3px;height:6px;border-radius:6px;
  background:var(--red-l);opacity:.35;transform:rotate(-1.5deg)
}
.mark{border-radius:50% 45% 55% 40%/45% 55% 45% 55%}

/* ---------- testata: bordo inferiore ondulato + forme organiche ---------- */
.hero{
  padding:96px 0 150px;overflow:hidden;
  background:linear-gradient(120deg,var(--red-d) 0%,var(--red) 55%,var(--red-l) 100%) !important;
  clip-path:polygon(0 0,100% 0,100% 78%,88% 84%,72% 88%,55% 86%,38% 91%,20% 95%,0 90%);
}
.hero::before{
  background:
    radial-gradient(circle at 85% 30%, rgba(255,190,120,.35) 0 110px, transparent 111px),
    radial-gradient(circle at 92% 70%, rgba(255,255,255,.08) 0 180px, transparent 181px),
    radial-gradient(circle at 8% 110%, rgba(0,0,0,.18) 0 220px, transparent 221px);
}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);max-width:14ch;letter-spacing:-.01em}
.hero h1::after{
  content:"";display:block;width:90px;height:6px;margin-top:18px;border-radius:6px;
  background:#f2c078;transform:rotate(-2deg)
}
.lead{font-family:var(--serif);font-style:italic;font-size:1.25rem}

/* ---------- banner: si sovrappone alla testata, inclinato ---------- */
.content{position:relative;padding-top:0}
.banner{
  margin:-120px 0 56px auto;width:88%;position:relative;z-index:2;
  border-radius:180px 18px 180px 18px;
  transform:rotate(-1.2deg);
  box-shadow:18px 18px 0 -2px rgba(184,100,43,.28),0 12px 30px rgba(60,20,10,.25);
  border:6px solid var(--card)
}
.crumb{position:relative;z-index:3;margin:-100px 0 110px;color:rgba(255,255,255,.85)}
.crumb a{color:#fff}
/* pagina senza banner (contatti): niente sovrapposizione */
.crumb + .contact{margin-top:0}
.crumb:not(:has(+ .banner)){margin:-70px 0 70px}

/* ---------- titoli di sezione ---------- */
h2{position:relative;font-size:2rem;color:var(--red-d);padding-left:0}
.prose h2::before{
  content:"";position:absolute;left:-26px;top:.35em;width:14px;height:14px;
  border-radius:50% 40% 55% 45%;background:var(--ochre);transform:rotate(20deg)
}
.prose h2::after{
  content:"";display:block;width:64px;height:4px;margin-top:10px;border-radius:4px;
  background:linear-gradient(90deg,var(--red),var(--ochre));transform:rotate(-1.5deg)
}

/* capolettera sul primo paragrafo */
.prose > h2:first-child + p::first-letter,
.prose > p:first-child::first-letter{
  float:left;font:700 4.2rem/.82 var(--serif);color:var(--red);
  margin:6px 12px 0 0;padding:8px 10px;background:var(--sand-2);border-radius:14px 4px 14px 4px
}

/* niente capolettera nel box contatti */
.contact .prose > p:first-child::first-letter{all:unset}

/* ---------- foto nei testi: stampe appoggiate, inclinate a caso ---------- */
.side{max-width:300px}
.side img{
  border:7px solid #fff;border-bottom-width:22px;border-radius:3px;
  box-shadow:0 10px 22px rgba(60,20,10,.22)
}
.side.right{transform:rotate(2.2deg);margin-right:-60px}
.side.left{transform:rotate(-2.4deg);margin-left:-60px}
.side:nth-of-type(3n) {transform:rotate(-1deg)}
.side:hover{transform:rotate(0) scale(1.03);transition:transform .3s}

/* ---------- confronto bacini: carte sfalsate ---------- */
.compare{gap:32px;align-items:start}
.compare .card{border-top:0;border-radius:28px 6px 28px 6px}
.compare .dry{transform:rotate(-1deg);box-shadow:10px 10px 0 rgba(184,100,43,.25)}
.compare .wet{transform:rotate(1deg) translateY(40px);box-shadow:-10px 10px 0 rgba(31,95,122,.22)}
.compare .card h3{font-size:1.3rem}
.compare .dry h3{color:var(--ochre-d)}
.compare .wet h3{color:var(--water)}

/* cifre chiave: bolle */
.facts{margin:80px 0 40px;gap:28px}
.facts li{
  border:0;padding:28px 18px;text-align:center;border-radius:50% 45% 55% 50%/55% 50% 50% 45%;
  background:var(--card);box-shadow:0 6px 18px rgba(60,20,10,.1)
}
.facts li:nth-child(2){transform:translateY(24px);background:var(--red);color:#fff}
.facts li:nth-child(2) b,.facts li:nth-child(2) span{color:#fff}
.facts li:nth-child(3){transform:rotate(2deg)}
.facts b{color:var(--red)}

/* ---------- citazioni ---------- */
blockquote{
  position:relative;border-left:0;background:none;padding:28px 28px 20px 70px;
  font-style:italic;color:var(--red-d)
}
blockquote::before{
  content:"“";position:absolute;left:0;top:-18px;font:700 7rem/1 var(--serif);color:var(--ochre);opacity:.55
}
blockquote.big{
  background:var(--red);color:#fff;border-radius:40px 8px 40px 8px;padding:40px 40px 32px 90px;
  transform:rotate(-.8deg);margin:48px -20px
}
blockquote.big::before{color:#f2c078;opacity:.9;left:18px;top:4px}
blockquote.big cite{color:rgba(255,255,255,.8)}

/* ---------- storia: linea del tempo alternata a zig-zag ---------- */
@media (min-width:901px){
  .content:has(.timeline) .prose{max-width:none}
  .content:has(.timeline) .prose > p,.content:has(.timeline) .note{max-width:760px}
  .timeline{border:0;position:relative;display:flex;flex-direction:column;gap:30px}
  .timeline::before{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;
    background:repeating-linear-gradient(180deg,var(--ochre) 0 10px,transparent 10px 18px)
  }
  .timeline li{
    width:calc(50% - 40px);padding:26px 28px 14px;background:var(--card);
    border-radius:24px 6px 24px 6px;box-shadow:0 6px 18px rgba(60,20,10,.08)
  }
  .timeline li:nth-child(odd){align-self:flex-start}
  .timeline li:nth-child(even){align-self:flex-end}
  .timeline li + li{margin-top:-180px}
  .timeline li::before{
    width:22px;height:22px;top:30px;border:4px solid var(--sand);background:var(--red)
  }
  .timeline li:nth-child(odd)::before{left:auto;right:-52px}
  .timeline li:nth-child(even)::before{left:-52px}
  .timeline li .side{max-width:200px}
  .timeline li .side.right{margin-right:-40px}
  .timeline li .side.left{margin-left:-40px}
}
.year{
  font-size:2.2rem;color:var(--red);line-height:1;margin-bottom:8px;
  background:linear-gradient(transparent 60%,rgba(242,192,120,.55) 60%);padding:0 4px
}

/* ---------- progetti: due carte sfalsate ---------- */
.projects{gap:36px}
.project{border-radius:32px 6px 32px 6px;position:relative;overflow:hidden}
.project::before{
  content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:var(--sand-2)
}
.project > *{position:relative}
.project:first-child{transform:rotate(-1deg)}
.project:last-child{transform:rotate(1deg) translateY(36px)}
.project h2{color:var(--red)}
.project h2::before,.project h2::after{display:none}
.effects{list-style:none;padding:0;counter-reset:e}
.effects li{
  counter-increment:e;position:relative;padding:14px 18px 14px 64px;margin-bottom:14px;
  background:var(--card);border-radius:18px 4px 18px 4px
}
.effects li:nth-child(even){margin-left:36px}
.effects li::before{
  content:counter(e);position:absolute;left:16px;top:12px;width:34px;height:34px;border-radius:50%;
  background:var(--red);color:#fff;font:700 1rem/34px var(--serif);text-align:center
}
.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding-left:34px}
.checklist li::before{
  content:"";position:absolute;left:4px;top:.55em;width:16px;height:16px;
  border:3px solid var(--ochre);border-radius:50% 40% 55% 45%
}

/* ---------- multimedia ---------- */
.video{border-radius:22px 4px 22px 4px}
.video-grid .video:nth-child(2){transform:translateY(30px)}
.video-grid.four .video:nth-child(odd){transform:rotate(-.6deg)}
.video-grid.four .video:nth-child(even){transform:rotate(.6deg) translateY(20px)}
.video-grid{margin-bottom:70px}

/* ---------- bibliografia: schede alternate ---------- */
.bib{background:var(--card);border:0;border-radius:16px 4px 16px 4px;padding:14px 18px;margin-bottom:10px}
.bib:nth-child(even){margin-left:28px;margin-right:-28px}
.lang{border-radius:50%;width:40px;height:40px;line-height:32px;background:var(--red);color:#fff}
.filters button.on{background:var(--red);border-color:var(--red)}
.dl{border-color:var(--red);color:var(--red);border-radius:20px}
.dl:hover{background:var(--red)}

/* ---------- contatti ---------- */
.form{border:0;border-radius:36px 8px 36px 8px;box-shadow:16px 16px 0 rgba(184,100,43,.22),0 10px 30px rgba(60,20,10,.1);transform:rotate(.6deg)}
.form .field,.form .check,.form .btn{transform:rotate(-.6deg)}
.field input,.field select,.field textarea{border-radius:14px 4px 14px 4px}

/* ---------- pulsanti ---------- */
.btn{background:var(--red);border-radius:30px 6px 30px 6px;padding:14px 28px;box-shadow:6px 6px 0 rgba(184,100,43,.35);transition:transform .2s}
.btn:hover{background:var(--red-d);transform:translate(-2px,-2px) rotate(-1deg)}

/* ---------- footer ondulato ---------- */
.site-footer{
  position:relative;margin-top:60px;padding-top:90px;
  background:linear-gradient(120deg,var(--water-d),#0e2d3b);
  clip-path:polygon(0 18%,15% 8%,32% 14%,50% 4%,68% 12%,84% 2%,100% 10%,100% 100%,0 100%)
}

/* ---------- telefono: meno inclinazioni, niente sporgenze ---------- */
@media (max-width:900px){
  .banner{width:100%;margin-top:-90px;border-radius:80px 12px 80px 12px}
  .side.right,.side.left{margin-left:0;margin-right:0}
  .compare .wet,.project:last-child{transform:rotate(1deg)}
  .bib:nth-child(even){margin-left:12px;margin-right:0}
}
@media (max-width:640px){
  .hero{padding:64px 0 120px;clip-path:polygon(0 0,100% 0,100% 86%,70% 92%,40% 88%,0 94%)}
  .crumb{margin:-80px 0 90px}
  .banner{margin-top:-70px;border-width:4px}
  .prose h2::before{display:none}
  .side,.side.right,.side.left{transform:rotate(-1deg)}
  .facts li:nth-child(2){transform:none}
  .effects li:nth-child(even){margin-left:0}
  blockquote.big{margin:36px 0;padding:36px 22px 26px 60px}
  .video-grid .video:nth-child(n){transform:none}
  .form,.form .field,.form .check,.form .btn{transform:none}
}

/* ---------- logo: cerchio con gradiente dal giallo al rosso ---------- */
.mark{
  background:linear-gradient(160deg,#f6c945 0%,#f08a2c 28%,#d8402f 55%,#b3202a 75%,#7a1414 100%);
  box-shadow:inset 0 0 0 1px rgba(110,14,14,.15)
}