/* ============================================================
   LUCA.MAINARDI — grunge / risograph / sketch one-pager  (v3)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
@font-face{font-family:'Broken Detroit';src:url('assets/fonts/Broken-Detroit.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Bad Grunge';src:url('assets/fonts/Bad-Grunge.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Brownist';src:url('assets/fonts/Brownist.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}

:root{
  --ink:#14100e;
  --ink-2:#1c1613;
  --bone:#f1e7d6;
  --bone-dim:rgba(241,231,214,.62);
  --bone-faint:rgba(241,231,214,.14);
  --orange:#ff5a1e;
  --orange-2:#ff8242;
  --ember:#c0360a;
  --orange-ink:#a82f08;        /* arancione "testo su crema" — WCAG AA (5.27:1) */
  --accent:var(--orange);
  --ghost:rgba(255,90,30,.92);
  --paper:#ece1cd;
  --paper-2:#e4d7bf;

  --maxw:1280px;
  --pad:clamp(20px,5vw,80px);
  --ff-display:'Broken Detroit',sans-serif;
  --ff-hand:'Brownist',cursive;
  --ff-body:'Courier Prime','Courier New',Courier,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--ff-body);font-size:18px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none;
  /* forza il rendering testuale di caratteri come → ↗ ← ↔ invece che emoji di sistema (iOS/Android) */
  font-variant-emoji:text;
}
@media (max-width:780px){body{cursor:auto}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---- global texture overlays ---- */
.tex-halftone{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);
  background-size:5px 5px;mix-blend-mode:overlay;opacity:.7}
.tex-dirt{position:fixed;inset:0;z-index:3;pointer-events:none;
  background-image:url("assets/tex/dirt-light.png");background-size:740px;mix-blend-mode:screen;opacity:.4}
.tex-grain{position:fixed;inset:-150%;z-index:60;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.2;mix-blend-mode:overlay;animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}16%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}
  50%{transform:translate(-3%,4%)}66%{transform:translate(4%,2%)}83%{transform:translate(-2%,-3%)}100%{transform:translate(0,0)}}
.tex-vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 58%,rgba(0,0,0,.5) 100%)}

/* ---- custom cursor: MATITA ---- */
.cursor{position:fixed;top:0;left:0;z-index:120;pointer-events:none;width:52px;height:52px;
  transform:translate(-50%,-50%);transition:width .18s,height .18s,filter .2s;
  filter:drop-shadow(2px 3px 0 rgba(20,16,14,.28))}
.cursor svg{width:100%;height:100%;display:block;transform-origin:50% 50%;
  transition:transform .25s cubic-bezier(.16,.84,.3,1)}
.cursor.is-hover{width:64px;height:64px;filter:drop-shadow(3px 4px 0 rgba(20,16,14,.38))}
.cursor.is-hover svg{transform:rotate(-12deg)}        /* "leggero gesto di chi scrive" */
/* il puntino arancione è il tratto che la matita "lascia" sotto la punta */
.cursor-dot{position:fixed;top:0;left:0;z-index:121;pointer-events:none;width:6px;height:6px;border-radius:50%;
  background:var(--orange);transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(255,90,30,.25)}
@media (max-width:780px){.cursor,.cursor-dot{display:none}}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative;z-index:5}
section{position:relative;z-index:5}

/* ---- video backgrounds ---- */
.vbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.vbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* dark sections: light streaks of the BW loop punch through */
.vbg video{mix-blend-mode:screen;opacity:.34;filter:grayscale(1) contrast(1.25) brightness(1.05)}
.vbg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 120% at 70% 10%,rgba(255,90,30,.16),transparent 55%)}
/* light/paper sections: the loop becomes moving ink on the cream */
.light .vbg video,.paper .vbg video{mix-blend-mode:multiply;opacity:.16;filter:grayscale(1) contrast(1.1)}
.light .vbg::after,.paper .vbg::after{background:radial-gradient(120% 120% at 70% 10%,rgba(255,90,30,.1),transparent 55%)}

/* ---- light / paper modes (flip tokens to ink-on-cream) ---- */
.light,.paper{
  --bone:#1c1510;--bone-dim:rgba(28,21,16,.66);--bone-faint:rgba(28,21,16,.2);
  --ghost:rgba(255,90,30,.85);
  background:var(--paper);color:#1c1510;
}
.light::before,.paper::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(20,15,10,.2) 1px,transparent 1.6px);background-size:6px 6px;mix-blend-mode:multiply;opacity:.5}
.light::after,.paper::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("assets/tex/dirt-dark.png");background-size:680px;mix-blend-mode:multiply;opacity:.55}
.light>.wrap,.paper>.wrap{position:relative;z-index:5}
/* torn top & bottom edge only on .paper */
.paper{clip-path:polygon(0% 1.1%,12% .2%,23% 1.3%,35% .3%,48% 1.2%,61% .4%,73% 1.4%,86% .4%,100% 1%,
  100% 98.9%,88% 99.8%,75% 98.6%,62% 99.7%,49% 98.8%,36% 99.8%,24% 98.7%,11% 99.7%,0% 99%)}
.paper .skill-mark{color:var(--orange);opacity:.3}

/* ---- marker labels / kickers ---- */
/* kicker handwritten — Caveat Brush ha tratto più tondo, dimensioni leggermente più grandi della Permanent Marker */
.kicker{font-family:var(--ff-hand);color:var(--accent);font-size:clamp(38px,5vw,58px);letter-spacing:.3px;
  display:inline-flex;align-items:center;gap:.5em;transform:rotate(-2deg);line-height:1}
.kicker::before{content:"";width:34px;height:2px;background:var(--accent)}

/* ---- reveal system (more movement) ---- */
.reveal{opacity:0;transform:translateY(46px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.3,1)}
.reveal.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-60px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.3,1)}
.rv-l.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(60px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.3,1)}
.rv-r.in{opacity:1;transform:none}
.rv-sc{opacity:0;transform:scale(.86) rotate(-1.2deg);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.3,1)}
.rv-sc.in{opacity:1;transform:none}
.fade{opacity:0;transition:opacity .9s ease}.fade.in{opacity:1}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}.d4{transition-delay:.38s}.d5{transition-delay:.48s}

/* masked word-by-word reveal */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em}
.split .w i{display:inline-block;font-style:normal;transform:translateY(115%);transition:transform .85s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--i,0)*60ms)}
.split.in .w i{transform:translateY(0)}
/* masked line reveal (for the wordmark) */
.linemask{overflow:hidden}
.linemask>span{display:block;transform:translateY(108%);transition:transform .95s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--i,0)*120ms)}
.linemask.in>span{transform:translateY(0)}

/* hand scribble */
.scribble{position:absolute;pointer-events:none;overflow:visible;filter:url(#brush-ink) drop-shadow(0 1px 0 rgba(255,90,30,.3))}
.scribble path{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  opacity:.92}
.draw.in .scribble path{animation:draw 1s ease forwards}
.draw.in .scribble path.d2{animation-delay:.25s}
@keyframes draw{to{stroke-dashoffset:0}}

.hero-h1{text-shadow:none}

/* ============================================================
   HERO (light)
   ============================================================ */
/* padding-bottom abbondante: tiene i bottoni sopra lo strappo a qualsiasi risoluzione */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding-block:clamp(90px,12vh,118px) clamp(140px,18vh,200px);overflow:hidden}
.hero .halftone{position:absolute;top:-12vw;right:-10vw;width:56vw;height:56vw;pointer-events:none;z-index:1;color:var(--orange);
  background-image:radial-gradient(currentColor 1.8px,transparent 2.3px);background-size:13px 13px;
  -webkit-mask:radial-gradient(circle at 70% 30%,#000,transparent 70%);mask:radial-gradient(circle at 70% 30%,#000,transparent 70%);opacity:.4}

.hero-center{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.brandlock{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(12px,1.8vw,30px);margin-top:6px}
.hero-dog{width:clamp(92px,11vw,168px);height:auto;flex:none;filter:drop-shadow(4px 5px 0 rgba(255,90,30,.55))}
.hero-h1{font-family:var(--ff-display);font-size:clamp(44px,12.5vw,178px);line-height:.8;text-transform:uppercase;letter-spacing:1px;margin:0;color:#1c1510;text-align:left;flex:none}
.hero-h1 .ln,.hero-h1>span{display:block;position:relative}
.hero-dotg{display:inline-block;font-family:var(--ff-body);font-weight:700;text-transform:lowercase;color:var(--orange);
  font-size:clamp(16px,2.3vw,30px);letter-spacing:4px;margin:0 0 10px;text-shadow:none}
/* ".graphics" a fianco di MAINARDI, parola intera ruotata.
   sideways-lr: il testo va dal basso all'alto con lettere LEGGIBILI
   (testa inclinata a sinistra). Punto "." IN BASSO, "s" in alto.
   Fallback vertical-rl per browser più vecchi. */
.hero-dotg-vert{font-family:var(--ff-display);text-transform:lowercase;color:var(--orange);
  font-size:clamp(18px,2.4vw,34px);line-height:1;letter-spacing:.01em;white-space:nowrap;
  writing-mode:vertical-rl;          /* fallback */
  writing-mode:sideways-lr;
  -webkit-writing-mode:sideways-lr;
  /* margin-left NEGATIVO: annulla il gap del flex .brandlock e attacca quasi alla "I" */
  align-self:flex-end;margin:0 0 calc(clamp(44px,12.5vw,178px) * .04) calc(-1 * clamp(10px,1.6vw,26px));
  text-shadow:none}
.hero-roles{font-family:var(--ff-hand);font-size:clamp(32px,4.8vw,60px);margin-top:18px;letter-spacing:.5px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.1em .25em;align-items:baseline}
.hero-roles .sep{color:var(--accent)}
.hero-roles .cr{color:var(--orange)}
.hero .intro-sub{margin:18px auto 0;max-width:52ch;color:var(--bone-dim);font-size:clamp(15px,1.8vw,20px)}

.hero-foot{margin-top:clamp(26px,5vh,56px);display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ============================================================
   COMPONENTI CONDIVISI — tag & mail button
   ============================================================ */
.tag{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border:1.5px solid var(--bone-faint);
  padding:8px 14px;border-radius:30px;color:var(--bone);transition:.2s}
.tag:hover{border-color:var(--accent);color:var(--accent);transform:rotate(-1.5deg)}
.mail-btn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--bone);
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:1px;font-size:clamp(20px,3vw,34px);
  padding:16px 30px;border-radius:6px;transition:.18s;position:relative}
.mail-btn:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:8px 8px 0 rgba(20,16,14,.35)}
.mail-btn svg{width:1.1em;height:1.1em}
@keyframes trot{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-1deg)}50%{transform:translateY(0)}75%{transform:translateY(-4px) rotate(1deg)}}

/* ============================================================
   SLEEP DOG + ZZZ + THX — pagina "Grazie" del libro
   ============================================================ */
.sleep-dog{position:relative;display:inline-block;margin:0 auto}
.sleep-dog img{width:min(340px,72vw);filter:drop-shadow(4px 6px 0 rgba(255,90,30,.28));animation:breathe 3.4s ease-in-out infinite;transform-origin:center bottom}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025,.985)}}
.zzz{position:absolute;top:-6%;right:-2%;font-family:var(--ff-hand);color:var(--orange);font-size:clamp(42px,6vw,64px)}
.zzz span{display:inline-block;opacity:0;animation:zfloat 3.2s ease-in-out infinite}
.zzz span:nth-child(2){animation-delay:.5s;font-size:1.3em}
.zzz span:nth-child(3){animation-delay:1s;font-size:1.6em}
@keyframes zfloat{0%{opacity:0;transform:translateY(6px) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translateY(-22px) rotate(8deg)}}
.thx{font-family:var(--ff-hand);color:var(--orange);font-size:clamp(56px,10vw,116px);margin:18px 0 6px;display:inline-block;transform:rotate(-2deg)}

/* ============================================================
   QUADERNO — flip-book navigation
   ============================================================ */
.book-sec{padding-block:clamp(86px,12vh,140px) clamp(56px,9vh,120px);position:relative;overflow:visible;border-top:0}
.book-sec>.vbg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* fotogramma fisso (estratto da elegant-na.mp4) — sostituisce il video loop, alleggerisce */
.vbg-still{background:url("assets/sketchbook-bg.jpg") center/cover no-repeat;
  filter:saturate(1.05) contrast(1.04)}
/* overlay UNIFORME sulla book-sec → match colore garantito con .hero-tear */
.book-sec .vbg::after{background:rgba(20,16,14,.42);mix-blend-mode:normal}
/* STRAPPO ALL'INVERSO: la carta crema dell'hero si strappa in basso,
   sotto emerge il fondo verde dello sketchbook (continuità col poster).
   Stesso poster + stesso overlay scuro della book-sec → colore combacia. */
/* z-index 4 → resta sotto al .wrap (z-5) così i bottoni dell'hero non vengono coperti */
.hero-tear{position:absolute;left:-3%;right:-3%;bottom:-40px;height:148px;z-index:4;pointer-events:none;
  background:
    /* STESSO overlay uniforme della book-sec → colore identico */
    linear-gradient(rgba(20,16,14,.42), rgba(20,16,14,.42)),
    /* stessa immagine del poster */
    url("assets/sketchbook-bg.jpg") center/cover no-repeat;
  /* solo l'ombra del foglio crema in cima (profondità tra i due fogli) */
  box-shadow:inset 0 28px 36px -10px rgba(20,16,14,.55);
  filter:url(#paper-tear)}
/* nasconde lo svg dei filtri senza disabilitarli */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
/* reduced-motion: senza distorsione, edge frastagliato geometrico */
@media (prefers-reduced-motion: reduce){
  .hero-tear{filter:none;
    clip-path:polygon(0% 35%,5% 12%,11% 28%,18% 8%,25% 30%,33% 14%,40% 32%,48% 10%,
      56% 28%,64% 14%,72% 30%,80% 12%,88% 32%,95% 10%,100% 28%,100% 100%,0% 100%)}
}
.book-head{text-align:center;margin-bottom:clamp(26px,4.5vh,52px)}
.book-head .kicker{justify-content:center}
.book-head .kicker::before{display:none}
.book-h2{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(34px,6vw,84px);line-height:.86;margin:.16em 0 0;letter-spacing:1px}

.book-stage{perspective:2400px;perspective-origin:54% 42%;display:flex;justify-content:center;position:relative}
.book{position:relative;width:min(880px,93vw);aspect-ratio:1.4/1;transform-style:preserve-3d}
@media (max-width:700px){.book{aspect-ratio:.78/1;width:90vw;margin-inline:auto}}

/* spiral binding (left spine) */
.book-rings{position:absolute;left:-13px;top:0;bottom:0;width:34px;z-index:55;pointer-events:none}
.ring{position:absolute;left:0;width:30px;height:8px;border-radius:8px;transform:translateY(-50%) rotate(-4deg);
  background:linear-gradient(180deg,#e9e0cf,#b7ac98 45%,#7c7363);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 4px rgba(0,0,0,.45)}

/* pages */
.pages{position:absolute;inset:0;transform-style:preserve-3d}
.leaf{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;
  transition:transform .92s cubic-bezier(.62,.04,.2,1);will-change:transform}
.leaf.flipped{transform:rotateY(-178deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  border-radius:4px 16px 16px 4px;background:#efe5d2;color:#1c1510;
  /* solo bordo interno: l'ombra esterna è applicata SOLO alla pagina attiva (vedi .leaf.active .face)
     altrimenti con 9 leaves × 2 facce le ombre si sommano in un mostro scuro */
  box-shadow:inset 0 0 0 1px rgba(20,16,14,.06);
  background-image:radial-gradient(rgba(20,15,10,.16) 1px,transparent 1.5px);background-size:7px 7px}
/* unica ombra esterna del libro: applicata SOLO alla pagina visibile in primo piano */
.leaf.active .face.front{box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(20,16,14,.06)}
/* gutter shadow near spine */
.face::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14%;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,16,14,.26),transparent)}
/* punched holes */
.face::after{content:"";position:absolute;left:18px;top:0;bottom:0;width:14px;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(20,16,14,.5) 0 4px,transparent 5px);background-size:14px calc(94% / 15);
  background-position:center 3%;background-repeat:repeat-y;opacity:.5}
.face.back{transform:rotateY(180deg);background:#e6dac2;background-image:radial-gradient(rgba(20,15,10,.1) 1px,transparent 1.5px)}
.face.back::after{left:auto;right:18px}

/* page inner content */
.face.front{display:flex;flex-direction:column;padding:clamp(26px,4.6%,56px);padding-left:clamp(58px,9%,104px);
  /* Safari: forza GPU layer e mantiene il contesto 3D durante il flip del leaf */
  -webkit-transform:translateZ(0.1px);transform:translateZ(0.1px);
  -webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.pg-mark{position:absolute;right:clamp(18px,4%,46px);top:clamp(14px,5%,42px);font-family:var(--ff-hand);
  color:rgba(255,90,30,.32);font-size:clamp(72px,16vw,200px);transform:rotate(-11deg);pointer-events:none;line-height:1}
.pg-no{position:absolute;right:clamp(20px,4%,40px);bottom:clamp(16px,4%,34px);font-family:var(--ff-hand);
  color:rgba(28,21,16,.62);font-size:clamp(30px,4vw,46px)}
.skill-page .pg-num{font-family:var(--ff-hand);font-size:clamp(56px,12vw,150px);line-height:.78;
  color:transparent;-webkit-text-stroke:2px var(--orange);text-stroke:2px var(--orange);opacity:.95}
.pg-title{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:1px;line-height:.86;margin:.12em 0 0;
  font-size:clamp(30px,6.4vw,76px)}
.pg-title .cr{color:var(--orange)}
.pg-body{margin:clamp(12px,2.2vh,22px) 0 0;max-width:46ch;color:rgba(28,21,16,.72);font-size:clamp(13.5px,1.55vw,18px);line-height:1.55}
.pg-body strong{color:#1c1510;font-weight:700}
/* margin-bottom: stacca i tag dalla scritta "sfoglia →" che sta in fondo */
.pg-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;margin-bottom:clamp(40px,6.5vh,64px);
  padding-top:clamp(14px,2.4vh,24px)}
.pg-tools .tag{font-family:var(--ff-body);font-size:clamp(10px,1.1vw,12.5px);font-weight:700;letter-spacing:1px;text-transform:uppercase;
  border:1.5px solid rgba(28,21,16,.26);padding:6px 12px;border-radius:30px;color:#1c1510;transition:.2s}
.pg-tools .tag:hover{border-color:var(--orange);color:var(--orange);transform:rotate(-1.5deg)}
.pg-foot{position:absolute;left:clamp(58px,9%,104px);bottom:clamp(14px,3.4%,30px);font-family:var(--ff-hand);
  color:rgba(28,21,16,.62);font-size:clamp(28px,3.4vw,38px)}

/* cover / index leaf */
.cover{justify-content:center;gap:clamp(6px,1.4vh,14px)}
.cover .pg-kicker{font-family:var(--ff-hand);color:var(--orange);font-size:clamp(30px,4vw,46px);transform:rotate(-2deg)}
.cover-title{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(38px,8vw,96px);line-height:.82;margin:.06em 0 .14em}
.cover-title em{font-style:normal;color:var(--orange)}
.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(4px,1vh,10px);max-width:480px}
.toc button{display:flex;align-items:baseline;gap:14px;width:100%;background:none;border:0;cursor:inherit;text-align:left;
  font-family:var(--ff-display);text-transform:uppercase;color:#1c1510;font-size:clamp(20px,3.6vw,40px);line-height:1;
  padding:4px 0;transition:.18s;letter-spacing:.5px}
.toc button .n{font-family:var(--ff-body);font-weight:700;font-size:.42em;color:var(--orange);letter-spacing:1px}
.toc button .dash{flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(28,21,16,.4) 0 7px,transparent 7px 13px);align-self:center}
.toc button .cr{color:var(--orange)}
.toc button:hover{transform:translateX(8px) rotate(-.6deg)}
.toc button:hover .dash{background:repeating-linear-gradient(90deg,var(--orange) 0 7px,transparent 7px 13px)}
.toc-links{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(14px,2.4vh,24px)}
/* mini-etichette adesive, coerenti con i post-it dei progetti */
.toc-links button{
  background:rgba(255,255,255,.42);border:1.5px solid rgba(28,21,16,.22);border-radius:6px;
  padding:8px 14px;font-family:var(--ff-hand);font-size:clamp(28px,3.6vw,38px);color:#1c1510;letter-spacing:.4px;
  cursor:inherit;display:inline-flex;align-items:center;gap:6px;line-height:1;
  box-shadow:1px 2px 0 rgba(20,16,14,.08);
  transition:transform .2s cubic-bezier(.16,.84,.3,1),background .2s,border-color .2s,color .2s,box-shadow .2s}
.toc-links button:nth-child(odd){transform:rotate(-1.4deg)}
.toc-links button:nth-child(even){transform:rotate(1.1deg)}
.toc-links button:hover{transform:rotate(0) translateY(-3px);background:rgba(255,255,255,.62);
  border-color:var(--orange-ink);color:var(--orange-ink);box-shadow:2px 4px 0 rgba(168,47,8,.22)}
.cover-dog{position:absolute;right:clamp(14px,4%,40px);bottom:clamp(10px,3%,30px);width:clamp(78px,16%,150px);height:auto;
  filter:drop-shadow(3px 4px 0 rgba(255,90,30,.5));transform:rotate(3deg);pointer-events:none}
@media (max-width:540px){.cover-dog{display:none}}

/* per-page content entrance when active */
/* Safari fix: backface-visibility:hidden esplicito + translateZ ai figli
   evita che il motore WebKit nasconda i contenuti durante il flip 3D del leaf */
.leaf .face.front>*{opacity:0;transform:translateY(20px) translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:opacity .55s ease,transform .65s cubic-bezier(.16,.84,.3,1)}
.leaf.active .face.front>*{opacity:1;transform:translateZ(0)}
.leaf.active .face.front>*:nth-child(2){transition-delay:.12s}
.leaf.active .face.front>*:nth-child(3){transition-delay:.2s}
.leaf.active .face.front>*:nth-child(4){transition-delay:.28s}
.leaf.active .face.front>*:nth-child(5){transition-delay:.36s}
.pg-mark,.pg-no,.cover-dog{opacity:1!important;transform:none!important;transition:none}

/* post-it tabs (right edge) */
/* il container è SPINTO DIETRO il piano del libro sull'asse Z (preserve-3d del .book)
   → le tab non-attive vengono coperte dal libro per la parte sovrapposta */
.book-tabs{position:absolute;top:5%;right:0;transform:translateX(100%) translateZ(-30px);z-index:1;
  display:flex;flex-direction:column;gap:8px;padding-left:0;transform-style:preserve-3d}
.tab{position:relative;cursor:pointer;border:0;font-family:var(--ff-hand);font-size:clamp(28px,2.8vw,36px);
  /* padding-left abbondante: il testo inizia ben dentro la tab, così resta leggibile
     anche quando i primi ~14px sono coperti dal bordo destro del libro */
  padding:8px 18px 8px 32px;border-radius:0 12px 12px 0;color:#1c1510;white-space:nowrap;letter-spacing:.4px;line-height:1.1;
  box-shadow:2px 2px 4px rgba(0,0,0,.18);transition:transform .22s cubic-bezier(.16,.84,.3,1),filter .2s;
  transform:translateX(-12px) rotate(-1.6deg)}
.tab .tn{font-family:var(--ff-body);font-weight:700;font-size:.62em;opacity:.62;margin-right:.5em;color:var(--orange-ink)}
/* pila di linguette kraft coerenti (due toni che si alternano) */
.tab:nth-child(odd){background:#e7d8ba;transform:translateX(-14px) rotate(-1.4deg)}
.tab:nth-child(even){background:#dac9a4;transform:translateX(-14px) rotate(1.2deg)}
.tab:hover{transform:translateX(-2px) rotate(0);filter:brightness(1.04);z-index:5}
/* pila di linguette: leggera sovrapposizione verticale per effetto "post-it impilati" */
.book-tabs > .tab + .tab{margin-top:-4px}
/* linguetta attiva: SALTA FUORI sul piano Z davanti al libro (+70 compensa il -30 del padre).
   Le non-attive restano dietro al libro per il translateZ(-30) del container. */
.tab.on{background:var(--orange);color:#1c1006;
  transform:translateX(-14px) rotate(0) translateZ(60px) scale(1.04);
  box-shadow:4px 4px 9px rgba(20,16,14,.25);
  filter:saturate(1.12);
  z-index:10}
.tab.on .tn{color:#7a1c02;opacity:.9}

/* book controls */
.book-nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,30px);margin-top:clamp(26px,4.5vh,50px)}
.bk-arrow{cursor:pointer;background:none;border:2px solid var(--bone-faint);color:var(--bone);width:58px;height:58px;border-radius:50%;
  font-size:24px;display:grid;place-items:center;transition:.2s;font-family:var(--ff-body)}
.bk-arrow:hover:not(:disabled){border-color:var(--orange);color:var(--orange);transform:translateY(-3px) rotate(-3deg)}
.bk-arrow:disabled{opacity:.28;cursor:default}
.bk-count{font-family:var(--ff-hand);font-size:clamp(42px,6vw,62px);color:var(--bone-dim);min-width:90px;text-align:center}
.bk-count b{color:var(--orange);font-weight:400}
.bk-hint{display:block;text-align:center;margin-top:14px;font-family:var(--ff-hand);color:var(--bone-dim);font-size:28px;opacity:.7}
.stamp.bk-stamp{display:table;margin:10px auto 0;mix-blend-mode:normal;opacity:.55}

@media (max-width:1024px){
  /* su mobile/tablet: linguette nascoste → si naviga con swipe, frecce e TOC dalla cover */
  .book-tabs{display:none}
  .book-nav{margin-top:clamp(26px,4.5vh,50px)}
}
@media (max-width:700px){
  .book{aspect-ratio:auto;height:min(70vh,540px);width:92vw}
  .face.front{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .face.front::-webkit-scrollbar{width:0}
  .book-rings{left:-9px;width:24px}.ring{width:22px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .leaf .face.front>*{opacity:1;transform:none}
  .tex-grain{display:none}
  /* ripristina il cursore di sistema per chi riduce il movimento */
  body{cursor:auto}
  .cursor,.cursor-dot{display:none}
}

/* ---- hero scroll CTA ---- */
.hero-foot{justify-content:center}
.hero-cta{display:inline-flex;align-items:center;gap:14px;font-family:var(--ff-display);text-transform:uppercase;
  letter-spacing:1.5px;font-size:clamp(17px,2.4vw,26px);color:var(--bone);background:var(--orange);
  padding:16px 30px;border-radius:6px;transition:.2s;box-shadow:5px 5px 0 rgba(20,16,14,.28)}
.hero-cta svg{animation:bob 1.6s ease-in-out infinite}
.hero-cta:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:8px 8px 0 rgba(20,16,14,.32);color:#1c1006}

/* ---- page: Chi sono ---- */
.about-page{justify-content:center}
.about-page .pg-kicker{font-family:var(--ff-hand);color:var(--orange);font-size:clamp(30px,4vw,46px);transform:rotate(-2deg);margin-bottom:6px}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4%,46px);align-items:center}
.about-page .pg-hand{font-family:var(--ff-hand);color:var(--orange);font-size:clamp(34px,4.5vw,54px);margin:14px 0 0;transform:rotate(-1deg)}
.about-photo{position:relative}
.about-photo img{width:100%;height:auto;border-radius:18px;transform:rotate(2.2deg);
  box-shadow:0 16px 34px rgba(0,0,0,.35);filter:contrast(1.06) saturate(1.04)}
.about-tape{position:absolute;z-index:2;width:96px;height:26px;background:rgba(255,90,30,.4);top:-10px;left:24%;transform:rotate(-7deg)}

/* ---- page: Contatti ---- */
.contact-page{justify-content:center;gap:6px}
.contact-page .pg-kicker{font-family:var(--ff-hand);color:var(--orange);font-size:clamp(34px,4.5vw,50px);transform:rotate(-2deg)}
.contact-page .mail-btn{align-self:flex-start;margin-top:14px;font-size:clamp(18px,2.6vw,30px)}
/* layout 2 colonne: info a sinistra, cane a destra */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3.5vw,46px);align-items:center}
.contact-info{display:flex;flex-direction:column}
.contact-dog-col{display:flex;justify-content:center;align-items:center}
/* cane originale (a colori), più grande, leggera ombra arancione */
.contact-dog-pg{width:100%;max-width:clamp(220px,28vw,340px);height:auto;
  filter:drop-shadow(3px 4px 0 rgba(255,90,30,.4));
  transform-origin:bottom center;animation:trot 1.1s ease-in-out infinite}

/* ---- page: Progetti ---- */
.proj-page{justify-content:center}
.proj-page .pg-kicker{font-family:var(--ff-hand);color:var(--orange);font-size:clamp(34px,4.5vw,50px);transform:rotate(-2deg);margin-bottom:clamp(14px,2.4vh,24px)}
.proj-grid-pg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.2vw,42px);padding:14px 6px 6px}
/* --- progetti come POST-IT --- */
.proj-pg{position:relative;display:block;overflow:visible;color:#1c1510;background:#f2d684;border-radius:2px;
  padding:clamp(22px,2.8vw,34px) clamp(18px,2.4vw,28px) clamp(24px,3vw,36px);
  box-shadow:5px 8px 16px rgba(20,16,14,.22);transform:rotate(-1.7deg);
  transition:transform .28s cubic-bezier(.16,.84,.3,1),box-shadow .28s}
.proj-pg:nth-child(even){background:#f9d3ad;transform:rotate(1.5deg)}
/* nastro adesivo in cima */
.proj-pg::before{content:"";position:absolute;top:-12px;left:50%;width:88px;height:26px;z-index:2;
  transform:translateX(-50%) rotate(-3deg);background:rgba(241,231,214,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.14);mix-blend-mode:multiply}
.proj-pg:nth-child(even)::before{transform:translateX(-50%) rotate(2.6deg)}
.proj-pg:hover{transform:rotate(0) translateY(-7px) scale(1.025);box-shadow:9px 15px 28px rgba(20,16,14,.3)}
.proj-pg .ptag{font-family:var(--ff-body);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(28,21,16,.7)}
.proj-pg h4{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(13px,2vw,24px);line-height:.9;margin:8px 0;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-pg h4 .o{color:var(--orange-ink)}
.proj-pg p{color:rgba(28,21,16,.74);font-size:clamp(13px,1.5vw,16px);margin:0;max-width:34ch;line-height:1.5}
.proj-pg .go{margin-top:16px;display:inline-flex;font-family:var(--ff-hand);font-size:clamp(30px,3.8vw,40px);color:var(--orange-ink)}
.proj-pg .ghost{position:absolute;right:10px;bottom:8px;font-family:var(--ff-display);font-size:clamp(64px,9vw,116px);
  color:rgba(28,21,16,.09);pointer-events:none;line-height:.8;z-index:0}
.proj-pg>*{position:relative;z-index:1}

/* ---- page: Referenze (lista brand + CTA mail) ---- */
.refs-page{justify-content:center}
.refs-page .pg-body{margin-top:clamp(10px,1.6vh,18px)}
.refs-page .pg-body strong{color:#1c1510;font-weight:700}
.refs-list{list-style:none;margin:clamp(14px,2vh,22px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px}
.refs-list li{font-family:var(--ff-body);font-weight:700;font-size:clamp(12px,1.4vw,15px);color:#1c1510;
  letter-spacing:.3px;line-height:1.3;position:relative;padding-left:14px}
.refs-list li::before{content:"·";position:absolute;left:2px;top:-2px;color:var(--orange-ink);font-weight:900;font-size:1.4em;line-height:1}
.refs-cta{margin-top:clamp(14px,2.4vh,22px);font-family:var(--ff-hand);font-size:clamp(30px,4vw,42px);color:#1c1510}
.refs-cta a{color:var(--orange-ink);border-bottom:2px solid var(--orange-ink);font-weight:700;padding-bottom:1px}
.refs-cta a:hover{background:rgba(168,47,8,.08)}

/* ---- page: Referenze (legacy refs-stack — non più usato ma stili tenuti per fallback) ---- */
.refs-page{justify-content:center}
.refs-page .pg-kicker{font-family:var(--ff-hand);color:var(--orange);font-size:clamp(34px,4.5vw,50px);transform:rotate(-2deg);margin-bottom:6px}
.refs-page .pg-title{margin-bottom:clamp(16px,2.6vh,28px)}

/* ---- page: Grazie ---- */
.thanks-page{justify-content:center;align-items:center;text-align:center;padding-left:clamp(40px,6%,80px);gap:6px}
/* Doggo è il protagonista: ingrandito, centrato */
.thanks-page .sleep-dog{margin:0 auto clamp(8px,2vh,16px)}
.thanks-page .sleep-dog img{width:clamp(260px,40vw,380px);max-width:80%;filter:drop-shadow(5px 7px 0 rgba(255,90,30,.32))}
.thanks-page .zzz{font-size:clamp(28px,4vw,44px)}
.thanks-page .thx{font-family:var(--ff-hand);color:var(--orange);font-size:clamp(30px,5.5vw,62px);margin:8px 0 2px;transform:rotate(-2deg)}
.thanks-page .pg-hand{font-family:var(--ff-hand);color:rgba(28,21,16,.72);font-size:clamp(16px,2.2vw,26px);margin:0}

/* CTA "Scrivimi" chiusura attiva */
.thanks-mail{margin-top:clamp(10px,2vh,18px);font-size:clamp(13px,1.6vw,18px);align-self:center}

/* Footer: chip dei link + p.iva piccola */
.thanks-foot{margin-top:clamp(16px,2.8vh,28px);display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.thanks-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.thanks-chip{font-family:var(--ff-body);font-weight:700;font-size:13px;letter-spacing:.5px;
  padding:8px 14px;border:1.5px solid rgba(28,21,16,.22);border-radius:6px;color:#1c1510;
  background:rgba(255,255,255,.4);box-shadow:1px 2px 0 rgba(20,16,14,.1);
  transition:transform .2s cubic-bezier(.16,.84,.3,1),border-color .2s,color .2s,background .2s}
.thanks-chip:nth-child(odd){transform:rotate(-1.3deg)}
.thanks-chip:nth-child(even){transform:rotate(1deg)}
.thanks-chip:hover{transform:rotate(0) translateY(-3px);background:rgba(255,255,255,.62);
  border-color:var(--orange-ink);color:var(--orange-ink);box-shadow:2px 4px 0 rgba(168,47,8,.22)}
.thanks-piva{margin:0;color:rgba(28,21,16,.55);font-size:clamp(10px,1.1vw,12px);letter-spacing:.4px}
.thanks-colophon{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin-top:6px}

/* ============================================================
   ACCESSIBILITÀ (WCAG 2.1 AA) — aggiunte
   ============================================================ */

/* ---- skip link "salta al contenuto" ---- */
.skip-link{position:fixed;left:12px;top:-70px;z-index:200;background:var(--ink);color:var(--bone);
  font-family:var(--ff-body);font-weight:700;letter-spacing:.5px;padding:12px 18px;border-radius:6px;
  text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* ---- indicatore di focus da tastiera (manca un cursore di sistema) ---- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(20,16,14,.45);border-radius:4px}

/* ---- arancione come TESTO su crema → tinta più scura, leggibile (1.4.3) ---- */
/* NB: ".hero-roles .cr" (la parola "Creator") usa --orange brillante per scelta estetica */
.light .kicker,
.hero-roles .sep,.hero-dotg,
.cover .pg-kicker,.cover-title em,
.toc button .n,.toc button .cr,
.pg-title .cr,
.about-page .pg-kicker,.about-page .pg-hand,
.contact-page .pg-kicker,
.proj-page .pg-kicker,.proj-pg h4 .o,.proj-pg .go,
.refs-page .pg-kicker,
.thanks-page .thx{color:var(--orange-ink)}
.skill-page .pg-num{-webkit-text-stroke-color:var(--orange-ink);text-stroke-color:var(--orange-ink)}
.pg-tools .tag:hover{color:var(--orange-ink)}
.pg-tools .tag:hover{border-color:var(--orange-ink)}
.proj-pg:hover{border-color:var(--orange-ink)}

/* ---- target touch più generosi (linguette e indice) ---- */
.tab{min-height:44px;display:inline-flex;align-items:center}
.toc button{min-height:44px}
@media (max-width:1024px){.book-tabs .tab{padding-block:11px}}


/* ---- contatto sempre visibile nell'hero ---- */
.hero-mail{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-body);font-weight:700;
  text-transform:uppercase;letter-spacing:1px;font-size:clamp(14px,1.7vw,17px);color:#1c1510;
  padding:14px 22px;border:2px solid rgba(28,21,16,.45);border-radius:6px;transition:.2s}
.hero-mail svg{width:1.2em;height:1.2em}
.hero-mail:hover{border-color:var(--orange-ink);color:var(--orange-ink);transform:translateY(-2px) rotate(-1deg)}

/* ============================================================
   CONTENUTI DELLE PAGINE — adattamenti tablet/mobile
   Devono stare DOPO le regole base per vincere la cascade.
   ============================================================ */
@media (max-width:1024px){
  /* "Chi sono": PRIMA la foto, POI il testo (column-reverse: l'HTML ha text prima della photo) */
  .about-grid{display:flex;flex-direction:column-reverse;gap:18px;align-items:stretch}
  .about-photo img{max-width:280px;margin:0 auto;display:block}
  /* "Altri progetti": post-it impilati verticalmente */
  .proj-grid-pg{display:grid;grid-template-columns:1fr;gap:24px;padding:18px 6px 8px}
  /* "Contatti": due righe — testo sopra, cane sotto */
  .contact-grid{display:flex;flex-direction:column;gap:14px;align-items:stretch}
  .contact-dog-col{margin-top:6px}
  .contact-dog-pg{max-width:min(260px,55vw)}
  /* "Referenze": lista brand a 2 colonne su mobile */
  .refs-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
  /* "Contatti": kicker più piccolo per non spezzarsi con pg-mark */
  .contact-page .pg-kicker{font-size:clamp(22px,5.5vw,34px)}
  /* il testo del libro non ha più la limitazione orizzontale */
  .pg-body{max-width:none}
}

/* ============================================================
   EASTER EGG: gioco "Doggo vs Gatti" — overlay e canvas
   ============================================================ */
.easter-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(20,16,14,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:24px;cursor:auto}
.easter-overlay[hidden]{display:none!important}
.easter-stage{position:relative;background:var(--paper);color:#1c1510;border-radius:6px;
  padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) clamp(16px,2.5vw,32px);
  max-width:560px;width:100%;text-align:center;
  background-image:radial-gradient(rgba(20,15,10,.2) 1px,transparent 1.6px);background-size:6px 6px;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(20,16,14,.1)}
.easter-close{position:absolute;top:10px;right:14px;width:40px;height:40px;border:0;
  background:none;font-family:var(--ff-display);font-size:28px;color:#1c1510;cursor:pointer;
  border-radius:50%;transition:transform .2s,background .2s;line-height:1}
.easter-close:hover{background:rgba(168,47,8,.12);transform:rotate(90deg);color:var(--orange-ink)}
.easter-close:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.easter-title{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(28px,4vw,44px);
  line-height:1;margin:0 0 4px;letter-spacing:1px}
.easter-title .cr{color:var(--orange-ink);font-family:var(--ff-hand);text-transform:lowercase;font-size:.7em}
.easter-sub{font-family:var(--ff-body);font-size:13px;color:rgba(28,21,16,.7);margin:0 0 14px;letter-spacing:.3px}
.easter-sub kbd{font-family:var(--ff-body);font-weight:700;font-size:11px;background:rgba(20,16,14,.08);
  padding:2px 6px;border-radius:4px;border:1px solid rgba(20,16,14,.18)}
.easter-canvas{display:block;margin:0 auto;background:#efe5d2;border-radius:4px;
  border:2px solid rgba(20,16,14,.18);max-width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges}
.easter-hud{display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;font-family:var(--ff-body);font-weight:700;font-size:14px;color:#1c1510;letter-spacing:.4px}
.easter-score b{color:var(--orange-ink)}
.easter-status{font-family:var(--ff-hand);color:var(--orange-ink);font-size:18px}
.easter-mobile-msg{display:none;font-family:var(--ff-hand);color:var(--orange-ink);font-size:18px;margin:14px 0 0}
@media (max-width:760px){
  .easter-canvas,.easter-hud,.easter-sub{display:none}
  .easter-mobile-msg{display:block}
}

/* ============================================================
   MACCHIE D'INCHIOSTRO — PNG fotografici con mix-blend:multiply
   ============================================================ */
.ink-splatter{position:absolute;pointer-events:none;z-index:2;
  width:clamp(160px,22vw,320px);height:auto;opacity:.8;mix-blend-mode:multiply}
/* variante "arancione": vira il nero verso un rust caldo */
.ink-splatter.ink--orange{filter:sepia(.7) hue-rotate(-12deg) saturate(2.2) brightness(.95);opacity:.6}
/* su fondo scuro multiply non rende bene → uso screen */
.ink-splatter.ink--on-dark{mix-blend-mode:screen;opacity:.35;filter:invert(1)}
/* posizioni preset HERO/COVER */
.ink--hero-1{top:0;left:-2%;transform:rotate(-12deg);width:clamp(200px,26vw,360px)}
.ink--hero-2{bottom:4%;right:-1%;transform:rotate(8deg);width:clamp(150px,18vw,260px)}
.ink--cover-1{top:-30px;right:-30px;transform:rotate(22deg);width:clamp(140px,20vw,240px)}
.ink--book-1{top:-30px;left:6%;transform:rotate(-8deg);width:clamp(80px,11vw,160px);z-index:7}
.ink--portfolio-1{top:10%;right:6%;transform:rotate(20deg);width:clamp(90px,11vw,160px)}

/* ============================================================
   TIMBRO TIPOGRAFICO — stile "MAKE IT STRANGE" del reference
   sans bold compatto, kerning ampio, leggera rotazione + ombra "stampa"
   ============================================================ */
.stamp{display:inline-block;font-family:var(--ff-display),'Arial Black',sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.18em;font-size:13px;line-height:1;
  color:#1c1510;background:transparent;padding:7px 10px 5px;
  border:1.5px solid #1c1510;border-radius:2px;
  transform:rotate(-3deg);
  opacity:.85;mix-blend-mode:multiply;
  /* leggera distorsione per simulare "inchiostro non perfettamente premuto" */
  filter:contrast(1.1);
  text-shadow:.4px .4px 0 #1c1510}
.stamp.stamp--orange{color:var(--orange-ink);border-color:var(--orange-ink);
  text-shadow:.4px .4px 0 var(--orange-ink)}
.stamp.stamp--light{color:var(--bone);border-color:var(--bone);
  text-shadow:.4px .4px 0 var(--bone);mix-blend-mode:screen;opacity:.7}
.stamp .dot{display:inline-block;width:4px;height:4px;background:currentColor;border-radius:50%;
  margin:0 .35em;transform:translateY(-2px)}

/* ---- macchie DENTRO le pagine del libro (face.front) ---- */
/* Stanno dentro ai bordi della pagina: preserve-3d del libro non rispetta overflow */
.face.front .ink-splatter{z-index:0;opacity:.42}    /* sotto al contenuto, leggere */
.ink--page-tr{top:2%;right:0;width:clamp(160px,28%,260px);transform:rotate(20deg)}
.ink--page-tl{top:2%;left:0;width:clamp(150px,24%,240px);transform:rotate(-15deg)}
.ink--page-bl{bottom:2%;left:0;width:clamp(160px,28%,260px);transform:rotate(-22deg)}
.ink--page-br{bottom:2%;right:0;width:clamp(150px,24%,240px);transform:rotate(18deg)}
.ink--page-mid{top:35%;right:0;width:clamp(130px,20%,200px);transform:rotate(8deg)}

@media (max-width:780px){.ink-splatter{opacity:.55}}
@media (prefers-reduced-motion: reduce){.ink-splatter{display:none}}