/* Pedane — tema "quaderno di schizzi" (dal moodboard di Max).
   Carta calda, spirale a sinistra, foto incollate col nastro,
   swatch di tessuto, annotazioni a matita/penna, titoletti scritti a mano. */
:root{
  --paper:#FAF8F3;          /* carta del quaderno */
  --paper-2:#F3EFE6;        /* carta scura (note) */
  --ink:#2E2B27;            /* grafite */
  --ink-soft:#7C756B;       /* grafite chiara */
  --line:#DDD6C9;
  --accent:#A3271D;         /* il rosso Pedane, resta */
  --tape:rgba(228,218,199,.75);
  --serifhand:"Segoe Script","Bradley Hand","Marker Felt",cursive;
  --serif:Iowan Old Style,Palatino,Georgia,serif;
}
body{background:var(--paper);color:var(--ink)}
a{color:var(--ink)}

/* — spirale sul bordo sinistro del corpo pagina — */
.sketch-page{position:relative}
.sketch-page main::before{
  content:"";position:fixed;top:0;bottom:0;left:0;width:14px;z-index:30;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,transparent 0 44px,#4a4a4a 44px 52px,#2b2b2b 52px 56px,transparent 56px 60px);
  opacity:.5;
}

/* — intestazione come carta — */
.site-head{background:var(--paper);border-bottom:1px dashed var(--ink-soft)}
.brand{font-family:var(--serifhand),var(--serif);font-size:26px;letter-spacing:.01em}

/* — sezioni quaderno, righe tenui — */
.sk-lines{background:
  repeating-linear-gradient(0deg,transparent 0 30px,rgba(125,115,140,.10) 30px 31px),
  var(--paper)}

/* — titolo con sottolineatura a matita (disegnata in SVG inline) — */
.hand{font-family:var(--serifhand),cursive;color:var(--ink)}
.underline-sketch{position:relative;display:inline-block}
.underline-sketch::after{content:"";position:absolute;left:-2%;bottom:-6px;width:104%;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M2 6 Q 18 2 34 5 T 64 4.5 T 92 3.5 T 118 5' fill='none' stroke='%232E2B27' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center/100% 100%}

/* — fogli incollati: foto, swatch, note — */
.leaf{position:relative;background:#fff;padding:16px 16px 12px;border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(0,0,0,.03),0 14px 28px -18px rgba(45,35,25,.38)}
.leaf.tilt-l{transform:rotate(-1.6deg)}
.leaf.tilt-r{transform:rotate(1.3deg)}
.leaf::before{content:"";position:absolute;top:-12px;left:50%;translate:-50% 0;width:86px;height:24px;
  background:var(--tape);transform:rotate(-2.5deg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.leaf img{filter:sepia(.08) contrast(1.02)}
.leaf figcaption{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-soft);
  margin-top:10px;display:flex;justify-content:space-between;gap:12px}

/* — swatch di tessuto (frange) — */
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatch{width:110px;height:64px;box-shadow:0 8px 16px -10px rgba(45,35,25,.35);transform:rotate(-.8deg);
  background:linear-gradient(100deg,#E4D6A6 0 22%,#6B6B44 22% 48%,#C9BFB0 48% 72%,#EFE9DC 72% 100%);
  border:1px solid rgba(120,110,95,.25)}
.swatch::after{content:"";display:block;height:100%;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px);
  mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px);background:inherit}

/* — nota post-it / cartellino — */
.note{background:var(--paper-2);border:1px dashed var(--ink-soft);padding:18px 20px;position:relative;
  box-shadow:0 10px 22px -16px rgba(45,35,25,.3)}
.note::before{content:"";position:absolute;top:-10px;right:22px;width:70px;height:20px;
  background:var(--tape);transform:rotate(3deg)}
.note .t{font-family:var(--serif);font-size:19px;margin:0 0 6px}
.note ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--ink-soft)}
.note ul li{margin-bottom:5px}

/* — annotazioni a penna con freccia — */
.ann{font-family:var(--serifhand),cursive;font-size:14.5px;color:var(--ink);line-height:1.35}
.ann .arrow{color:var(--ink-soft)}

/* — etichetta di collezione (come lo "street mood" del quaderno) — */
.mood-title{font-family:var(--serifhand),cursive;font-size:22px;margin:0 0 4px}
.mood-title::after{content:"";display:block;width:64px;height:2px;background:var(--ink);margin-top:6px}
.mood-list{list-style:none;margin:10px 0 0;padding:0}
.mood-list li{position:relative;padding-left:16px;font-size:14.5px;color:var(--ink-soft);margin-bottom:5px}
.mood-list li::before{content:"•";position:absolute;left:0;color:var(--ink)}

/* — bottoni: restano solidi, un tocco di inchiostro — */
.btn{border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}

/* — drop demo come cartellino del laboratorio — */
.drop-tag{background:#fff;border:1px solid var(--line);padding:24px;position:relative}
.drop-tag::before{content:"";position:absolute;top:-12px;left:26px;width:86px;height:24px;background:var(--tape);transform:rotate(-2deg)}
.drop-tag .demo-title{font-family:var(--serif);font-size:28px}

@media (max-width:860px){
  .leaf.tilt-l,.leaf.tilt-r{transform:none}
  .sketch-page main::before{display:none}
}