/* ==========================================================
   Ducoton-300 — versione B: tutto a matita
   Si appoggia al foglio della versione A e cambia solo la materia:
   al posto della fotografia, il segno.
   ========================================================== */

:root { --wall: #f5f2eb; }
body { background: var(--wall); }

/* il muro è una piastrella di segni che si ripete (vedi intonaco.js) */
.tex {
  position: absolute; inset: 0;
  background-color: var(--wall);
  background-image: var(--tex);
  background-size: 560px 560px;
}
.tex--big { background-image: var(--tex-big); background-size: 1300px 1300px; }
.tex--ad { background-image: var(--tex-light); background-size: 420px 420px; }

.hero__wall .tex {
  --m: 0%;
  -webkit-mask-image: radial-gradient(circle at 40% 70%, #000 var(--m), transparent calc(var(--m) + 30%));
          mask-image: radial-gradient(circle at 40% 70%, #000 var(--m), transparent calc(var(--m) + 30%));
}
.hero__wall::after { background: radial-gradient(ellipse at 50% 45%, rgba(250,248,243,.5), rgba(250,248,243,0) 65%); }

.hero__draw, .details__grains {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: url(#rough-soft);
}
.hero__draw .draw, .details__grains path {
  fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.hero__draw .sun .draw { stroke: var(--sun); stroke-width: 2.2; }
.hero__draw .ground { stroke-width: 1.6; }
.hero__draw .soft, .details__grains .hatch { stroke-width: .9; opacity: .55; }

.details__wall::after { background: rgba(248,246,240,.12); }
.details__grains path { stroke-width: 1.5; }

/* il vicino: muro pulito sotto, muffa disegnata sopra */
.neighbor__clean, .neighbor__dirty { position: absolute; inset: 0; }
.neighbor__dirty { will-change: clip-path; }
.neighbor__dirty canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.neighbor__stack::after { display: none; }
.neighbor__copy .display { text-shadow: 0 0 24px var(--wall), 0 0 6px var(--wall); }

/* la lumaca, a linea */
.snail__frame { transform-origin: 0 0; will-change: transform; }
.snail__frame::before { display: none; }
.snail-draw .ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.snail-draw .body { fill: var(--wall); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.snail-draw .shell { fill: var(--wall); stroke: var(--ink); stroke-width: 1.6; }
.snail-draw .band { fill: none; stroke: var(--shell); stroke-width: 7; stroke-linecap: round; opacity: .9; }
.snail-draw .band-light { fill: none; stroke: var(--shell-2); stroke-width: 2; stroke-linecap: round; opacity: .8; }
.snail-draw .seal { fill: none; stroke: var(--sun); stroke-width: 2.4; stroke-linecap: round; }
.snail-draw .dot { fill: var(--ink); }
.snail-draw { filter: url(#rough-soft); }
.snail-note { font-family: var(--hand); font-size: 26px; fill: var(--ink); opacity: 0; }

.trail__sheen { stroke: rgba(130,150,160,.22); stroke-width: 12; stroke-linecap: round; filter: url(#rough-soft); }
.trail__text { fill: var(--graphite); }

/* posa lento: la pagina bianca, e lei */
.ad__figure--drawn { position: relative; aspect-ratio: 1100 / 800; border: 1.5px solid var(--ink); overflow: hidden; }
.ad__figure--drawn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ad-trail { fill: none; stroke: rgba(130,150,160,.35); stroke-width: 4; stroke-linecap: round; }