/* ============================================================
   SISTEMA (26 set 2026) - i pezzi comuni del redesign completo
   Lo stesso linguaggio delle testate, portato dentro le pagine.
   1. Sezioni   2. Testate di sezione   3. Schede   4. Pillole
   5. Libri   6. Stati vuoti, elenchi, fisarmoniche   7. Footer
   8. Pagine semplici (privacy, 404, link in bio)
   Le regole di una sola pagina: css/pagine.css.
   ============================================================ */
:root{ --pp-carta:#FBFAF7; }

/* ---- 1. SEZIONI A TUTTA LARGHEZZA ------------------------------------- */
.pp-sez{ position:relative; isolation:isolate; padding-block:clamp(56px,7vw,104px); border-bottom:3px solid var(--pp-ink,#242124); }
.pp-sez--stretta{ padding-block:clamp(40px,5vw,72px); }
.pp-sez--carta{ background:var(--pp-carta); }
.pp-sez--ink{ background:var(--pp-ink,#242124); color:var(--pp-cream,#F0E6C7); }
.pp-sez--acido{ background:var(--pp-acid,#F9DB62); }
.pp-sez--rosa{ background:var(--pp-rosa,#FF85A5); }
.pp-sez--rosa::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(rgba(36,33,36,.16) 1.3px,transparent 1.8px) 0 0/13px 13px; }
.pp-sez--mesh::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url("../inc/asset/brand/mesh.jpg") 0 0/100% 100% no-repeat; opacity:.42; }
.pp-sez + .pp-sez{ border-top:0; }
.pp-sez[id]{ scroll-margin-top:80px; }

/* ---- 2. TESTATA DI SEZIONE -------------------------------------------- */
.pp-capo{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 40px; margin-bottom:clamp(28px,4vw,48px); }
.pp-capo-testo{ min-width:0; max-width:780px; }
.pp-occhiello{ display:flex; align-items:center; gap:10px; margin:0 0 14px; max-width:none; color:inherit;
  font:700 .76rem/1.2 "Space Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.pp-occhiello::before{ content:""; flex:0 0 28px; height:3px; background:currentColor; }
.pp-sez--ink .pp-occhiello{ color:var(--pp-acid,#F9DB62); }
.pp-capo-titolo{ margin:0; color:inherit; font:400 clamp(1.9rem,4.8vw,3.8rem)/.95 "Archivo Black",sans-serif; text-transform:uppercase; letter-spacing:-.01em; text-wrap:balance; }
#site-content .pp-capo-intro,#site-content .pp-capo-intro p{ max-width:58ch; margin:16px 0 0; color:inherit; font:400 1rem/1.62 "Space Mono",monospace; }
#site-content .pp-capo-intro p + p{ margin-top:.8em; }
.pp-sez--ink .pp-capo-intro{ color:rgba(240,230,199,.9); }

/* ---- 3. SCHEDE ---------------------------------------------------------- */
.pp-griglia{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:clamp(18px,2.4vw,28px); }
.pp-griglia > li{ margin:0; min-width:0; }
.pp-griglia--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pp-card{ position:relative; display:flex; flex-direction:column; height:100%; min-width:0; overflow:hidden; color:var(--pp-ink,#242124);
  background:var(--pp-carta); border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-card,20px); box-shadow:4px 6px 0 var(--pp-ink,#242124);
  transition:transform .18s ease,box-shadow .18s ease; }
.pp-card:hover{ transform:translate(-2px,-4px); box-shadow:6px 10px 0 var(--pp-ink,#242124); }
.pp-card:focus-within{ outline:3px solid var(--pp-ink,#242124); outline-offset:3px; }
.pp-card-media{ position:relative; aspect-ratio:var(--pp-rapporto,4/3); overflow:hidden; background:var(--pp-cream,#F0E6C7); border-bottom:3px solid var(--pp-ink,#242124); }
.pp-card-media img{ display:block; width:100%; height:100%; object-fit:cover; border:0 !important; border-radius:0 !important; transition:transform .5s ease; }
.pp-card:hover .pp-card-media img{ transform:scale(1.04); }
.pp-card-media .pp-pill{ position:absolute; top:12px; left:12px; z-index:2; }
.pp-card-corpo{ display:flex; flex-direction:column; flex:1 1 auto; gap:10px; padding:18px 20px 20px; }
.pp-card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.pp-card-titolo{ margin:0; font:400 1.15rem/1.1 "Archivo Black",sans-serif; text-transform:uppercase; color:inherit; }
.pp-card-titolo a{ color:inherit; text-decoration:none; }
.pp-card-titolo a:focus-visible{ outline:none; }
/* tutta la scheda porta al link del titolo */
.pp-card-titolo a::after{ content:""; position:absolute; inset:0; z-index:1; }
#site-content .pp-card-testo{ margin:0; max-width:none; color:rgba(36,33,36,.78); font:400 .86rem/1.55 "Space Mono",monospace;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pp-card-azione{ margin-top:auto; padding-top:6px; font:700 .78rem/1.3 "Space Mono",monospace; text-transform:uppercase; letter-spacing:.03em; }
.pp-card-azione span{ border-bottom:3px solid var(--pp-acid,#F9DB62); }
.pp-card-azione::after{ content:" →"; }
.pp-card-azione--giu::after{ content:" ↓"; }
.pp-card-azione--fuori::after{ content:" ↗"; }
.pp-card--spenta{ box-shadow:none; opacity:.72; }
.pp-card--spenta:hover{ transform:none; box-shadow:none; }

/* ---- 4. PILLOLE --------------------------------------------------------- */
.pp-pill{ display:inline-flex; align-items:center; gap:.35em; padding:.3em .75em; white-space:nowrap; color:var(--pp-ink,#242124);
  background:var(--pp-carta); border:2px solid var(--pp-ink,#242124); border-radius:999px;
  font:700 .68rem/1.15 "Space Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }
.pp-pill--acido,.pp-pill--bivacco{ background:var(--pp-acid,#F9DB62); }
.pp-pill--rosa,.pp-pill--siparietto{ background:var(--pp-rosa,#FF85A5); }
.pp-pill--ink{ background:var(--pp-ink,#242124); color:var(--pp-acid,#F9DB62); }
/* TÖLT ha il suo viola (01_BRAND), e solo TÖLT */
.pp-pill--tolt{ background:var(--pp-viola,#702963); color:#FBFAF7; }
.pp-pill--grande{ padding:.35em 1em; font:400 1rem/1.1 "Archivo Black",sans-serif; letter-spacing:0; }

/* ---- 5. LIBRI: la copertina in piedi su un cartoncino --------------- */
.pp-libri{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:clamp(28px,3.4vw,44px) clamp(18px,2.4vw,32px); }
.pp-libro{ position:relative; display:grid; align-content:start; gap:8px; margin:0; padding-top:18px; }
.pp-libro-num{ position:absolute; top:0; left:-6px; z-index:2; color:var(--pp-carta); font:400 clamp(2.2rem,3.6vw,3rem)/.8 "Archivo Black",sans-serif;
  -webkit-text-stroke:3px var(--pp-ink,#242124); paint-order:stroke fill; pointer-events:none; }
.pp-libro-cop{ --pad:18px; position:relative; display:block; aspect-ratio:1; background:var(--pp-carta); border:3px solid var(--pp-ink,#242124);
  border-radius:16px; box-shadow:4px 6px 0 var(--pp-ink,#242124); transition:transform .18s ease,box-shadow .18s ease; }
/* la copertina al centro, mai piu' grande del cartoncino (in un riquadro con
   aspect-ratio l'altezza in percentuale non si risolve: si usa l'assoluto) */
.pp-libro-cop img{ position:absolute; inset:var(--pad); display:block; margin:auto; max-width:calc(100% - 2 * var(--pad)); max-height:calc(100% - 2 * var(--pad)); width:auto; height:auto;
  border:2px solid var(--pp-ink,#242124) !important; border-radius:3px !important; box-shadow:4px 6px 0 rgba(36,33,36,.85); transform:rotate(-1.5deg); }
.pp-libro:nth-child(even) .pp-libro-cop img{ transform:rotate(1.5deg); }
.pp-libro:hover .pp-libro-cop{ transform:translate(-2px,-4px); box-shadow:6px 10px 0 var(--pp-ink,#242124); }
.pp-libro-titolo{ margin:6px 0 0; font:400 1.1rem/1.1 "Archivo Black",sans-serif; text-transform:uppercase; }
.pp-libro-titolo a{ color:var(--pp-ink,#242124); text-decoration:none; }
.pp-libro-titolo a::after{ content:""; position:absolute; inset:0; z-index:1; }
.pp-libro:focus-within .pp-libro-cop{ outline:3px solid var(--pp-ink,#242124); outline-offset:3px; }
#site-content .pp-libro-meta{ margin:0; max-width:none; font:400 .82rem/1.45 "Space Mono",monospace; color:rgba(36,33,36,.8); }
.pp-libro-stato{ justify-self:start; }
.pp-sez--ink .pp-libro-titolo a{ color:var(--pp-cream,#F0E6C7); }
.pp-sez--ink .pp-libro-meta{ color:rgba(240,230,199,.8) !important; }

/* ---- 6. STATI VUOTI, ELENCHI, FISARMONICHE, LINK ---------------------- */
.pp-vuoto{ display:grid; justify-items:start; gap:14px; max-width:640px; padding:clamp(22px,3vw,34px); color:var(--pp-ink,#242124);
  background:var(--pp-carta); border:3px dashed var(--pp-ink,#242124); border-radius:var(--pp-r-card,20px); }
.pp-vuoto img{ width:72px; height:auto; border:0 !important; border-radius:0 !important; }
#site-content .pp-vuoto p{ margin:0; max-width:52ch; font:400 1rem/1.55 "Space Mono",monospace; }
.pp-elenco{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font:400 .95rem/1.5 "Space Mono",monospace; }
.pp-elenco li{ display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; margin:0; }
.pp-elenco li::before{ content:""; width:12px; height:12px; margin-top:.36em; background:var(--pp-acid,#F9DB62); border:2px solid var(--pp-ink,#242124); }
.pp-elenco a{ color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--pp-acid,#F9DB62); text-underline-offset:3px; }
.pp-fisa{ display:grid; gap:12px; }
.pp-fisa details{ background:var(--pp-carta); border:3px solid var(--pp-ink,#242124); border-radius:16px; box-shadow:2px 3px 0 var(--pp-ink,#242124); }
.pp-fisa summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:56px; padding:.7rem 1.1rem; cursor:pointer;
  font:400 1rem/1.2 "Archivo Black",sans-serif; text-transform:uppercase; }
.pp-fisa summary::-webkit-details-marker{ display:none; }
.pp-fisa summary::after{ content:"+"; font-size:1.5rem; line-height:1; transition:transform .2s ease; }
.pp-fisa details[open] summary::after{ transform:rotate(45deg); }
.pp-fisa details > :not(summary){ margin:0; padding:0 1.1rem 1.1rem; }
.pp-freccia{ display:inline-flex; align-items:center; gap:.4em; color:inherit; font:700 .82rem/1.3 "Space Mono",monospace; text-transform:uppercase;
  text-decoration:none; border-bottom:3px solid var(--pp-acid,#F9DB62); }
.pp-freccia::after{ content:"→"; }
.pp-freccia:hover{ background:var(--pp-acid,#F9DB62); color:var(--pp-ink,#242124); }

/* ---- 7. FOOTER: il fondale ------------------------------------------- */
.pp-fondale{ position:relative; background:var(--pp-ink,#242124); color:var(--pp-cream,#F0E6C7); border-top:3px solid var(--pp-ink,#242124); }
.pp-fondale::before{ content:""; position:absolute; left:0; right:0; top:0; height:10px; background:url("../inc/asset/brand/mesh.jpg") 0 0/100% 100% no-repeat; border-bottom:3px solid var(--pp-ink,#242124); }
.pp-fondale a{ color:inherit; }
.pp-fondale-su{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(18px,3vw,32px); padding-top:clamp(52px,6vw,84px); }
.pp-fondale-invito{ display:grid; gap:14px; align-content:start; padding:clamp(22px,3vw,34px); background:var(--pp-acid,#F9DB62); color:var(--pp-ink,#242124);
  border:3px solid var(--pp-carta); border-radius:var(--pp-r-card,20px); box-shadow:6px 9px 0 #000; }
.pp-fondale-invito--rosa{ background:var(--pp-rosa,#FF85A5); }
.pp-fondale-invito h2{ margin:0; font:400 clamp(1.5rem,3vw,2.3rem)/1 "Archivo Black",sans-serif; text-transform:uppercase; color:var(--pp-ink,#242124); }
#site-content .pp-fondale-invito p,.pp-fondale-invito p{ margin:0; max-width:46ch; font:400 .95rem/1.55 "Space Mono",monospace; color:var(--pp-ink,#242124); }
.pp-fondale-invito .pp-h2-btn{ justify-self:start; box-shadow:4px 6px 0 var(--pp-ink,#242124); }
.pp-fondale-mail{ justify-self:start; font:400 clamp(1rem,2.2vw,1.45rem)/1.1 "Archivo Black",sans-serif; color:var(--pp-ink,#242124) !important; text-decoration:underline;
  text-decoration-thickness:4px; text-underline-offset:5px; overflow-wrap:anywhere; }
.pp-fondale-griglia{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:32px clamp(18px,2.4vw,32px); padding-block:clamp(44px,5vw,68px); }
.pp-fondale-chi{ display:grid; gap:14px; align-content:start; }
.pp-fondale-chi img{ width:88px; height:auto; filter:invert(1) sepia(.25) brightness(1.02); border:0 !important; border-radius:0 !important; }
.pp-fondale-nome{ font:400 1.5rem/.95 "Archivo Black",sans-serif; text-transform:uppercase; color:var(--pp-acid,#F9DB62); text-decoration:none; }
.pp-fondale-chi p{ margin:0; max-width:34ch; font:400 .85rem/1.55 "Space Mono",monospace; color:rgba(240,230,199,.78); }
.pp-fondale-social{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.pp-fondale-social a{ padding:.3rem .7rem; border:2px solid rgba(240,230,199,.5); border-radius:999px; font:700 .68rem/1.2 "Space Mono",monospace; text-transform:uppercase; text-decoration:none; }
.pp-fondale-social a:hover{ background:var(--pp-acid,#F9DB62); color:var(--pp-ink,#242124); border-color:var(--pp-acid,#F9DB62); }
.pp-fondale-col h2{ margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid rgba(240,230,199,.25); color:var(--pp-acid,#F9DB62);
  font:700 .74rem/1.2 "Space Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.pp-fondale-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pp-fondale-col li{ margin:0; }
.pp-fondale-col a{ font:400 .88rem/1.35 "Space Mono",monospace; color:rgba(240,230,199,.88); text-decoration:none; }
.pp-fondale-col a:hover{ color:var(--pp-acid,#F9DB62); text-decoration:underline; text-underline-offset:3px; }
.pp-fondale-giu{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; padding-block:18px 26px; border-top:2px solid rgba(240,230,199,.18);
  font:400 .72rem/1.5 "Space Mono",monospace; color:rgba(240,230,199,.66); }
.pp-fondale-giu p{ margin:0; max-width:none; font:inherit; color:inherit; }
.pp-fondale-giu nav{ display:flex; flex-wrap:wrap; gap:6px 16px; text-transform:uppercase; }
.pp-fondale-giu nav a{ text-decoration:none; }
.pp-fondale-giu nav a:hover{ color:var(--pp-acid,#F9DB62); }
/* il bottone che apre una colonna al telefono (script nel footer) */
:is(#pp-peso, body) .pp-f-piega{ display:flex; justify-content:space-between; align-items:center; width:100%; margin:0; padding:0; background:none; border:0; box-shadow:none; transform:none;
  color:var(--pp-acid,#F9DB62); font:700 .8rem/1.2 "Space Mono",monospace; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; min-height:44px; }
:is(#pp-peso, body) .pp-f-piega::after{ content:"+"; font-size:1.3rem; }
:is(#pp-peso, body) .pp-f-piega[aria-expanded="true"]::after{ content:"–"; }

/* ---- 8. PAGINE SEMPLICI ---------------------------------------------- */
.pp-prosa{ max-width:72ch; margin:0 auto; font:400 1rem/1.75 "Space Mono",monospace; }
.pp-prosa > *{ max-width:none; }
.pp-prosa h2{ margin:2.2em 0 .6em; font:400 clamp(1.4rem,2.6vw,1.9rem)/1.05 "Archivo Black",sans-serif; text-transform:uppercase; }
.pp-prosa h3{ margin:1.8em 0 .5em; font:400 1.15rem/1.1 "Archivo Black",sans-serif; text-transform:uppercase; }
.pp-prosa p,.pp-prosa li{ font:inherit; }
.pp-prosa ul{ padding-left:1.2em; }
.pp-prosa li::marker{ color:var(--pp-ink,#242124); }
.pp-prosa a{ color:inherit; text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--pp-acid,#F9DB62); text-underline-offset:4px; }
.pp-prosa strong{ font-weight:700; }
.pp-foglio{ padding:clamp(24px,4vw,56px); background:var(--pp-carta); border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-card,20px); box-shadow:6px 9px 0 var(--pp-ink,#242124); }
/* 404 */
.pp-th--errore .pp-th-titolo{ font-size:clamp(5rem,20vw,13rem); line-height:.8; }
.pp-th--errore{ --th-ombra:var(--pp-rosa,#FF85A5); }
.pp-th--errore::before{ background:url("../inc/asset/brand/mesh.jpg") 0 0/100% 100% no-repeat; opacity:.5; }
.pp-errore-creatura{ display:block; width:min(100%,380px); height:auto; margin-inline:auto; transform:rotate(-8deg); border:0 !important; }
/* pagina generica e negozio */
.pp-th--pagina{ padding-bottom:clamp(30px,4vw,56px); }
.pp-th--pagina::before{ background:url("../inc/asset/brand/mesh.jpg") 0 0/100% 100% no-repeat; opacity:.35; }
.pp-th--negozio{ padding-bottom:clamp(24px,3vw,40px); --th-ombra:var(--pp-acid,#F9DB62); }
.pp-th--negozio .pp-th-titolo{ font-size:clamp(2.4rem,5.4vw,4.4rem); }

/* ---- TELEFONO ------------------------------------------------------------ */
@media (max-width:1023px){
  .pp-griglia--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pp-fondale-griglia{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pp-fondale-chi{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .pp-sez{ padding-block:44px; }
  .pp-capo{ margin-bottom:24px; }
  .pp-griglia--3{ grid-template-columns:minmax(0,1fr); }
  .pp-card-corpo{ padding:14px 16px 16px; }
  .pp-libri{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; }
  .pp-libro-cop{ --pad:12px; }
  .pp-libro-titolo{ font-size:.95rem; }
  .pp-fondale-su{ grid-template-columns:minmax(0,1fr); }
  .pp-fondale-griglia{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .pp-fondale-col{ border-bottom:2px solid rgba(240,230,199,.14); padding-bottom:6px; }
  .pp-fondale-col h2{ margin:0; padding:0; border:0; }
  .pp-fondale-col ul{ padding:6px 0 12px; }
  .pp-fondale-giu{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .pp-card,.pp-card-media img,.pp-libro-cop,.pp-fisa summary::after{ transition:none; }
}