/* inokiness.com — il muro. Generato da strumenti/costruisci.py: modificare strumenti/muro.tpl.css */

/* ---------- caratteri (in casa, OFL: vedi /font/LICENZE.txt) ---------- */
@font-face{font-family:'IK Stencil';src:url('/font/stencil-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IK Stencil';src:url('/font/stencil-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IK Macchina';src:url('/font/courier-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IK Macchina';src:url('/font/courier-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IK Macchina';src:url('/font/courier-400i-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IK Macchina';src:url('/font/courier-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IK Macchina';src:url('/font/courier-700-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IK Pennarello';src:url('/font/pennarello-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IK Pennarello';src:url('/font/pennarello-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- colori e materiali ---------- */
:root{
  --toner:#141414;          /* il muro, l'inchiostro */
  --toner-2:#1d1d1d;
  --carta:#DFDFDA;          /* carta da fotocopia, grigio freddo */
  --carta-2:#ECECE8;        /* stoffa della pezza, etichette */
  --rosso:#E2231A;          /* fumogeno: unico accento caldo */
  --rosso-fondo:#BE1A12;    /* rosso sotto il testo piccolo chiaro (4,6:1 con la carta) */
  --rosso-penna:#B3140D;    /* scritte rosse sulla carta (5:1) */
  --rosso-vivo:#FF5146;     /* scritte rosse piccole sul nero (6:1) */
  --nastro:#A9A8A1;         /* nastro americano, testo secondario sul nero */
  --timbro:#2330A8;         /* inchiostro da tampone: timbri e righe */
  --f-stencil:'IK Stencil','Arial Narrow',Impact,sans-serif;
  --f-macchina:'IK Macchina','Courier New',Courier,monospace;
  --f-pennarello:'IK Pennarello','Bradley Hand','Segoe Print',cursive;
  --g:16px;
  --largo:1180px;
  --grana-scura:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .1  0 0 0 0 .1  4.2 0 0 0 -2.78'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  --grana-chiara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92  0 0 0 0 .92  0 0 0 0 .9  2.6 0 0 0 -1.62'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --inchiostro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -5 0 0 0 3.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23i)'/%3E%3C/svg%3E");
  --ombra-carta:0 14px 26px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (min-width:700px){:root{--g:28px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body,main,.piede{overflow-x:clip}}
body{margin:0;min-height:100vh;background:var(--toner) url('/img/muro.webp');background-size:640px 640px;color:var(--carta);
  font:400 1.0625rem/1.6 var(--f-macchina);-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;background:var(--grana-chiara);background-size:220px;opacity:.28;pointer-events:none;z-index:40}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:2px}
a:hover{text-decoration-color:var(--rosso)}
:focus-visible{outline:3px solid var(--rosso);outline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3{font-weight:900;margin:0}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* nascosto finché non ci si arriva col tab; niente left:-9999px: con l'arabo (rtl) allargava la pagina di 10.000px */
.salta{position:absolute;inset-inline-start:10px;top:10px;z-index:60;background:var(--rosso-fondo);color:var(--carta);padding:10px 14px;font-weight:700}
.salta:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zona{max-width:var(--largo);margin:clamp(96px,13vw,170px) auto 0;padding:0 var(--g);position:relative}
.carta{background-color:var(--carta);background-image:var(--grana-scura);color:var(--toner)}
.carta a{color:var(--toner)}

/* nastro adesivo */
.nastro{position:absolute;z-index:3;width:clamp(70px,13vw,108px);height:clamp(22px,3.6vw,30px);
  background:rgba(196,195,186,.8) var(--grana-scura);clip-path:polygon(5.6% 0.0%,5.8% 14.3%,3.4% 28.6%,1.8% 42.9%,0.0% 57.1%,4.6% 71.4%,3.3% 85.7%,5.3% 100.0%,95.2% 100.0%,96.2% 85.7%,97.1% 71.4%,94.9% 57.1%,94.4% 42.9%,98.1% 28.6%,94.6% 14.3%,97.4% 0.0%);pointer-events:none}
.nastro.b{clip-path:polygon(2.3% 0.0%,1.1% 14.3%,4.6% 28.6%,0.5% 42.9%,3.8% 57.1%,2.6% 71.4%,0.4% 85.7%,3.6% 100.0%,98.4% 100.0%,99.1% 85.7%,94.2% 71.4%,97.0% 57.1%,99.4% 42.9%,99.5% 28.6%,97.0% 14.3%,99.7% 0.0%);background-color:rgba(205,203,192,.74)}

/* ---------- testata ---------- */
/* dal 24/10: logo intero piccolo al centro, menu centrato sotto (Inoki: «il logo piccolo in alto … tagliato bene, in alto, centrale») */
.testata{max-width:var(--largo);margin:0 auto;padding:14px var(--g) 0;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:5}
.testata nav ul{justify-content:center}
.testata .testata-nome{font:900 1.7rem/1 var(--f-stencil);letter-spacing:.06em;text-decoration:none;color:var(--carta);padding:4px 0}
.testata ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.testata li:not(:last-child)::after{content:"/";color:var(--nastro);padding:0 .4em}
.testata a{display:inline-block;padding:6px 0;font:700 .8125rem/1.4 var(--f-macchina);text-transform:uppercase;letter-spacing:.07em;text-decoration:none;color:var(--carta)}
.testata a:hover{color:var(--rosso)}
/* le bandiere per la lingua (21/10, richiesta di Inoki: «con tutte le lingue»): un adesivo con quella aperta,
   al tocco il foglietto con tutte. Si genera con strumenti/lingue.py; inset-inline/margin-inline per l'arabo (rtl) */
.testata .lingue{position:absolute;top:14px;inset-inline-end:var(--g);margin:0;z-index:20}
.testata .lingue summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:8px 2px}
.testata .lingue summary::-webkit-details-marker{display:none}
.testata .lingue summary::after{content:"";border-style:solid;border-width:6px 5px 0;border-color:var(--carta) transparent transparent}
.testata .lingue[open] summary::after{border-width:0 5px 6px;border-color:transparent transparent var(--carta)}
.testata .lingue summary img{display:block;height:20px;width:auto;border:2px solid var(--carta);box-shadow:0 3px 6px rgba(0,0,0,.55);transform:rotate(-3deg)}
.testata .lingue summary:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
.testata .lingue ul{position:absolute;inset-inline-end:0;top:100%;display:block;min-width:210px;margin:6px 0 0;padding:6px 0;
  background-color:var(--carta);background-image:var(--grana-scura);box-shadow:0 14px 26px rgba(0,0,0,.6);transform:rotate(1deg)}
.testata .lingue li::after{content:none}
/* 25/10 (Inoki: «le bandiere non scrollano bene»): il foglietto non esce mai dallo schermo, scorre dentro di sé */
.testata .lingue ul{max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.testata .lingue li a{display:flex;align-items:center;gap:12px;padding:8px 14px;color:var(--toner);font:700 .9375rem/1.2 var(--f-macchina);text-transform:none;letter-spacing:0}
.testata .lingue li img{flex:none;height:18px;width:auto;outline:1px solid rgba(0,0,0,.25)}
.testata .lingue li a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.testata .lingue li a:hover,.testata .lingue li a:focus-visible{background:var(--rosso-fondo);color:var(--carta)}
@media (max-width:899px){.testata .lingue{position:absolute;top:12px;inset-inline-end:var(--g)}}
.testata .testata-nome img{display:block;height:84px;width:auto}

/* ---------- apertura: il manifesto e la pezza ---------- */
.apertura{max-width:var(--largo);margin:0 auto;padding:26px var(--g) 0;display:grid;grid-template-columns:minmax(0,1fr);position:relative}
.manifesto{position:relative;margin:0 0 0 auto;width:min(100%,540px);transform:rotate(-1.2deg);filter:drop-shadow(0 16px 22px rgba(0,0,0,.55))}
.manifesto img{width:100%;clip-path:polygon(0 0,100% 0,100% 71%,98.9% 73.5%,98.0% 75.9%,96.5% 77.6%,93.4% 78.2%,94.2% 80.5%,92.7% 80.8%,90.3% 83.0%,89.1% 85.7%,86.5% 86.5%,85.7% 90.3%,85.5% 90.0%,84.2% 91.7%,82.4% 93.5%,79.6% 97.4%,78.7% 97.4%,78% 100%,0 100%)}
.manifesto::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% 71%,98.9% 73.5%,98.0% 75.9%,96.5% 77.6%,93.4% 78.2%,94.2% 80.5%,92.7% 80.8%,90.3% 83.0%,89.1% 85.7%,86.5% 86.5%,85.7% 90.3%,85.5% 90.0%,84.2% 91.7%,82.4% 93.5%,79.6% 97.4%,78.7% 97.4%,78% 100%,0 100%);pointer-events:none;
  background:linear-gradient(97deg,transparent 27%,rgba(255,255,255,.08) 29%,transparent 31.5%),
             linear-gradient(84deg,transparent 63%,rgba(0,0,0,.09) 64.5%,transparent 67%),
             linear-gradient(176deg,transparent 46%,rgba(0,0,0,.06) 47%,transparent 49%)}
.manifesto .nastro:nth-of-type(1){top:-10px;left:-16px;transform:rotate(-36deg)}
.manifesto .nastro:nth-of-type(2){top:-8px;right:-18px;transform:rotate(31deg)}
.manifesto .nastro:nth-of-type(3){bottom:12%;left:-20px;transform:rotate(28deg)}

.pezza{position:relative;z-index:4;justify-self:start;margin:-26vw 0 0 -4px;max-width:100%;
  transform:rotate(-2.4deg);transform-origin:left center;
  padding:.07em .2em 0;background-color:var(--carta-2);color:var(--toner);
  background-image:linear-gradient(90deg,transparent 0 21%,rgba(0,0,0,.07) 23%,transparent 26% 58%,rgba(0,0,0,.05) 61%,transparent 64%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px);
  border-top:.075em solid var(--rosso);border-bottom:.075em solid var(--rosso);
  font:900 clamp(6.4rem,31vw,17.5rem)/.8 var(--f-stencil);letter-spacing:.015em;
  box-shadow:0 18px 30px rgba(0,0,0,.55)}
/* dal 20/10 la pezza porta il logo originale di Inoki (foto/logo/), non piu' il nome a stencil */
.pezza img{display:block;height:1.1em;width:auto;max-width:100%;object-fit:contain;margin:.05em 0 .09em}
.pezza::before,.pezza::after{content:"";position:absolute;top:.12em;width:.16em;height:3px;background:#a0998a}
.pezza::before{left:-.16em;transform:rotate(-24deg);transform-origin:right}
.pezza::after{right:-.16em;transform:rotate(22deg);transform-origin:left}
.aka{position:relative;z-index:5;justify-self:start;margin:14px 0 0 10px;transform:rotate(-1deg);
  background:var(--rosso-fondo);color:var(--carta);padding:6px 12px 5px;font:700 clamp(.88rem,2.8vw,1.05rem)/1.35 var(--f-macchina)}
.ritaglio{position:relative;justify-self:start;max-width:420px;margin:34px 0 0 4px;padding:22px 22px 16px;transform:rotate(1.1deg);clip-path:polygon(0.0% 1.5px,1.8% 2.3px,5.0% 3.9px,7.9% 3.8px,10.0% 4.7px,12.5% 2.7px,14.9% 4.3px,17.7% 3.7px,20.7% 2.2px,22.5% 3.4px,24.1% 4.5px,27.2% 4.4px,29.6% 3.0px,32.6% 3.4px,34.2% 1.1px,36.6% 2.0px,39.5% 4.2px,41.5% 2.7px,44.8% 1.7px,48.0% 3.2px,49.7% 3.8px,51.3% 3.7px,53.9% 2.5px,57.2% 2.8px,59.5% 3.0px,61.5% 4.1px,63.8% 3.1px,65.5% 2.6px,67.5% 3.0px,69.9% 1.1px,72.3% 1.2px,74.4% 3.8px,76.4% 4.9px,78.4% 3.4px,80.8% 2.6px,82.9% 1.7px,84.6% 3.0px,87.7% 4.9px,90.3% 4.1px,93.0% 3.2px,95.0% 4.4px,98.3% 1.9px,100% 3.1px,calc(100% - 1.1px) 3.3%,calc(100% - 1.1px) 6.0%,calc(100% - 4.0px) 8.4%,calc(100% - 2.0px) 10.5%,calc(100% - 1.4px) 13.1%,calc(100% - 3.5px) 16.4%,calc(100% - 2.4px) 18.0%,calc(100% - 1.3px) 21.0%,calc(100% - 1.6px) 24.1%,calc(100% - 3.1px) 27.3%,calc(100% - 1.7px) 30.2%,calc(100% - 2.1px) 33.3%,calc(100% - 3.8px) 35.8%,calc(100% - 2.8px) 38.4%,calc(100% - 2.3px) 40.8%,calc(100% - 2.9px) 42.5%,calc(100% - 1.1px) 45.6%,calc(100% - 2.5px) 48.3%,calc(100% - 2.7px) 50.2%,calc(100% - 1.8px) 52.7%,calc(100% - 1.4px) 55.2%,calc(100% - 4.6px) 57.4%,calc(100% - 3.0px) 59.7%,calc(100% - 1.8px) 62.2%,calc(100% - 3.4px) 65.0%,calc(100% - 4.3px) 67.7%,calc(100% - 1.1px) 70.1%,calc(100% - 1.1px) 71.7%,calc(100% - 1.6px) 73.7%,calc(100% - 3.9px) 75.7%,calc(100% - 1.6px) 78.3%,calc(100% - 3.8px) 81.5%,calc(100% - 3.7px) 84.5%,calc(100% - 3.2px) 87.5%,calc(100% - 1.9px) 90.6%,calc(100% - 4.9px) 92.7%,calc(100% - 4.2px) 95.8%,calc(100% - 3.1px) 98.6%,calc(100% - 1.9px) 100%,98.6% calc(100% - 1.1px),95.4% calc(100% - 1.8px),93.2% calc(100% - 2.3px),90.7% calc(100% - 4.9px),88.6% calc(100% - 4.1px),85.8% calc(100% - 2.4px),84.0% calc(100% - 1.9px),82.1% calc(100% - 3.7px),79.7% calc(100% - 4.4px),76.9% calc(100% - 4.7px),74.9% calc(100% - 2.4px),72.7% calc(100% - 4.5px),70.4% calc(100% - 3.7px),67.9% calc(100% - 2.9px),65.0% calc(100% - 4.9px),61.6% calc(100% - 1.9px),58.5% calc(100% - 3.9px),56.6% calc(100% - 1.3px),54.0% calc(100% - 1.7px),50.6% calc(100% - 4.6px),47.5% calc(100% - 1.9px),45.9% calc(100% - 4.0px),42.7% calc(100% - 3.4px),41.1% calc(100% - 4.4px),39.0% calc(100% - 2.5px),36.7% calc(100% - 2.4px),33.7% calc(100% - 2.2px),30.4% calc(100% - 4.5px),28.3% calc(100% - 3.4px),25.1% calc(100% - 4.8px),23.0% calc(100% - 4.5px),19.8% calc(100% - 1.5px),16.5% calc(100% - 3.2px),14.3% calc(100% - 1.4px),12.6% calc(100% - 1.2px),9.9% calc(100% - 1.3px),7.7% calc(100% - 4.5px),5.1% calc(100% - 4.2px),2.8% calc(100% - 4.3px),0.0% calc(100% - 2.4px),2.8px 99.4%,2.3px 97.2%,1.3px 93.9%,4.7px 92.2%,4.9px 90.6%,4.9px 87.8%,1.4px 86.0%,1.9px 83.6%,3.5px 81.5%,4.9px 79.4%,3.2px 76.1%,3.8px 72.8%,3.6px 70.5%,2.0px 67.3%,3.2px 65.5%,2.2px 62.5%,2.0px 60.5%,1.3px 58.6%,2.1px 56.8%,4.9px 54.4%,2.8px 51.1%,3.6px 49.0%,3.6px 47.4%,4.8px 44.2%,2.6px 42.4%,2.2px 40.6%,2.3px 37.8%,2.3px 36.2%,4.4px 33.1%,4.6px 30.1%,2.2px 28.0%,2.3px 25.5%,3.2px 22.3%,3.3px 19.7%,3.4px 16.5%,2.0px 14.4%,1.1px 12.6%,2.0px 10.6%,1.3px 8.0%,3.2px 5.7%,1.3px 2.7%);font-size:1rem}
.ritaglio-ombra{filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));justify-self:start;position:relative}
.ritaglio-ombra .nastro{top:-8px;left:42%;transform:rotate(-4deg)}
.ritaglio p:last-child{margin-bottom:0}
.adesivo{justify-self:end;display:block;max-width:370px;margin:30px 8px 0 0;padding:14px 16px 12px;background:var(--rosso-fondo);color:var(--carta);text-decoration:none;
  transform:rotate(3deg);box-shadow:0 8px 14px rgba(0,0,0,.5);clip-path:polygon(0 0,100% 0,100% 82%,92% 100%,0 100%);position:relative}
.adesivo b{display:block;font:900 2rem/.9 var(--f-stencil);letter-spacing:.03em;margin-bottom:6px}
.adesivo span{display:block;font:700 .92rem/1.4 var(--f-macchina)}
.adesivo:hover{background:#a3160f}
/* dal 24/10 il logo intero (con tutta la spada) apre la pagina, poi arriva la faccia (Inoki: «farei partire il logo e poi la faccia con animazione») */
/* dopo il sipario il logo resta solo come filigrana grande dietro la foto (Inoki, 24/10 07:11: «grande, sullo sfondo in trasparenza, e avanti la foto») */
.logo-intero{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}  /* 24/10 07:13 Inoki: «finita l'animazione sparisce il logo, rimane solo la mia foto»: resta per chi legge con lo screen reader */
.logo-intero img{display:block;width:100%;height:auto}
.apertura>*:not(.logo-intero){position:relative;z-index:1}
/* niente sovrapposizione: la punta della spada non deve finire sulla testa di Inoki (24/10) */
@media (max-width:899px){.manifesto{order:1;margin:18px auto 0}.aka{justify-self:center}.aka{order:2}.ritaglio-ombra{order:3}.adesivo{order:4}}
/* ---------- il sipario (24/10, rifatto su richiesta di Inoki: «decentrato … si può fare di meglio») ----------
   Solo con html.intro (lo mette lo script in testa, una volta per visita). La spada si sfodera al centro dello schermo,
   la lama si accende e taglia, le due metà si aprono e sotto c'è il sito. Tocco = salta (muro.js). ~2,3 s in tutto. */
.sipario{display:none}
.intro .sipario{display:block;position:fixed;inset:0;z-index:100;pointer-events:auto;cursor:pointer;animation:via 0s linear 2.3s forwards}
.intro .sipario .meta{position:absolute;inset:0;background-color:var(--toner);background-image:var(--grana-chiara);display:flex;align-items:center;justify-content:center}
.intro .sipario .sx{clip-path:inset(0 50% 0 0);animation:apri-sx .8s cubic-bezier(.7,0,.2,1) 1.45s forwards}
.intro .sipario .dx{clip-path:inset(0 0 0 50%);animation:apri-dx .8s cubic-bezier(.7,0,.2,1) 1.45s forwards}
/* il logo: largo come serve, con la spada (al 50,4% dell'immagine) esattamente sul centro dello schermo */
.intro .sipario img{width:min(70vw,52vh,440px);height:auto;transform:translateX(calc(min(70vw,52vh,440px) * -.004));
  animation:sfodera 1s cubic-bezier(.2,.7,.2,1) .15s both}
.intro .sipario .taglio{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--carta);
  box-shadow:0 0 18px 4px rgba(236,236,232,.55),0 0 2px var(--carta);transform-origin:top;transform:scaleY(0);
  animation:taglia .3s cubic-bezier(.5,0,.2,1) 1.15s forwards,spegni .25s ease-out 1.6s forwards}
@keyframes sfodera{0%{opacity:0;clip-path:inset(0 0 100% 0);translate:0 -6%}30%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}}
@keyframes taglia{to{transform:scaleY(1)}}
@keyframes spegni{to{opacity:0}}
@keyframes apri-sx{to{transform:translateX(-52%)}}
@keyframes apri-dx{to{transform:translateX(52%)}}
@keyframes via{to{visibility:hidden;pointer-events:none}}
/* sotto il sipario: il manifesto viene attaccato quando le metà si aprono, poi il resto */
.intro .manifesto{animation:attacchina .75s cubic-bezier(.3,1.4,.5,1) 1.75s both}
.intro .manifesto .nastro,.intro .manifesto .prossima{animation:compare .25s ease-out 2.35s both}
.intro .aka,.intro .ritaglio-ombra,.intro .adesivo{animation:compare .5s ease-out 2.4s both}
@keyframes attacchina{0%{opacity:0;transform:translate(6%,-8%) rotate(7deg) scale(1.12)}100%{opacity:1;transform:rotate(-1.2deg)}}
@keyframes compare{from{opacity:0}to{opacity:1}}
@media (min-width:900px){
  .apertura{grid-template-columns:minmax(0,1fr);padding-top:34px}
  .manifesto{grid-column:1;grid-row:1;margin:0 auto;width:min(46vw,560px);transform-origin:center}
  .ritaglio-ombra{grid-column:1;grid-row:1;align-self:end;margin:0 0 0 4%}
  .adesivo{grid-column:1;grid-row:2;align-self:start;justify-self:center;margin-top:26px}
  .aka{grid-column:1;grid-row:2;justify-self:center;margin:18px 0 0}
}
@media (min-width:900px) and (max-width:1199px){

}

/* ---------- ultime: la bacheca con la cosa più fresca (22/10). I quadri restano a colori: niente grana sopra ---------- */
.ultime-t{font:900 clamp(2.6rem,10vw,3.8rem)/.9 var(--f-stencil);letter-spacing:.03em;color:var(--carta);margin:0 0 22px;transform:rotate(-1.5deg);display:inline-block}
.bacheca{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:30px 34px}
.polaroid{position:relative;margin:0;width:min(78vw,340px);background:var(--carta-2);color:var(--toner);padding:12px 12px 14px;box-shadow:0 14px 26px rgba(0,0,0,.55);transform:rotate(-2deg)}
.bacheca li:nth-child(2n) .polaroid{transform:rotate(1.6deg)}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover}
.polaroid a:focus-visible{outline:3px solid var(--rosso);outline-offset:3px}
.polaroid figcaption{padding-top:10px;font-size:.9rem;line-height:1.4}
.polaroid figcaption b{display:block;font:900 1.5rem/1.05 var(--f-stencil);letter-spacing:.02em;margin:2px 0 4px}
.ult-tipo{display:block;font:700 .8125rem/1.3 var(--f-macchina);text-transform:uppercase;letter-spacing:.08em;color:var(--rosso-fondo)}
.puntina{position:absolute;z-index:2;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ff7a70 0 18%,var(--rosso) 45%,#7d0d08 100%);box-shadow:2px 4px 5px rgba(0,0,0,.5)}
/* il video: si vede intero, verticale, e parte solo col play (preload none: niente scaricato finché non si preme) */
.polaroid-video{width:min(66vw,260px)}
.polaroid video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#000}
.polaroid figcaption b a{color:inherit;text-underline-offset:3px}
.polaroid figcaption b a:hover{color:var(--rosso-fondo)}
/* il link al profilo sta dentro la polaroid, come per il video (Inoki, 23/10) */
.ult-ig{display:inline-block;margin-top:6px;font-weight:700;color:var(--toner);text-underline-offset:3px}
.ult-ig:hover,.ult-ig:focus-visible{color:var(--rosso-fondo)}

/* l'adesivo «prossima data» sulla foto dell'apertura: lo riempie muro.js con la prima data non passata (24/10) */
.prossima{position:absolute;z-index:4;top:7%;right:-10px;display:block;max-width:62%;background:var(--rosso);color:var(--carta);text-decoration:none;
  padding:10px 14px 9px;transform:rotate(4deg);box-shadow:0 8px 16px rgba(0,0,0,.55);clip-path:polygon(0 0,100% 0,100% 100%,7% 100%,0 86%)}
.prossima .pr-et{display:block;font:700 .75rem/1.2 var(--f-macchina);text-transform:uppercase;letter-spacing:.1em}
.prossima .pr-giorno{display:block;font:900 2.4rem/1 var(--f-stencil);letter-spacing:.02em;margin:2px 0}
.prossima .pr-dove{display:block;font:700 .8125rem/1.3 var(--f-macchina)}
.prossima:hover,.prossima:focus-visible{background:#c91d15}
.prossima:focus-visible{outline:3px solid var(--carta);outline-offset:3px}
@media (max-width:899px){.prossima{top:auto;bottom:9%;transform:rotate(-3deg)}}  /* al telefono sul cappotto, non sulla faccia */

/* ---------- giradischi (24/10, Inoki: «clicco le copertine e le ascolto da YouTube, così levi la cassa»): le copertine in griglia,
   il lettore (youtube-nocookie, playlist ufficiale dell'album) si carica solo quando ne tocchi una ---------- */
.cassa.giradischi ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;overflow:visible;padding:14px 4px}
.cassa.giradischi li{width:auto;transform:none}
.giradischi a{cursor:pointer}
.giradischi a[aria-current] img{outline:4px solid var(--rosso);outline-offset:3px}
.giradischi a:focus-visible img{outline:3px solid var(--carta);outline-offset:3px}
@media (min-width:700px){.cassa.giradischi ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1100px){.cassa.giradischi ul{grid-template-columns:repeat(7,minmax(0,1fr))}}
.piatto{margin:18px 0 8px;background:#090909;border:clamp(8px,1.6vw,14px) solid #222;outline:1px solid #343434;box-shadow:0 22px 40px rgba(0,0,0,.6);max-width:860px;scroll-margin-top:20px}
.piatto-titolo{margin:0;padding:10px 12px 8px;font:900 1.5rem/1.05 var(--f-stencil);color:var(--carta);letter-spacing:.02em}
.piatto-nota{margin:0;padding:0 12px 10px;font-size:.8125rem;color:var(--nastro)}
.piatto-video{position:relative;aspect-ratio:16/9;background:#000}
.piatto-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- la bandiera dietro a tutto, appena si cambia lingua (24/10, Inoki): appena percettibile, dopo un minuto torna nero.
   La accende muro.js con html.bandiera e --bandiera-img; con «riduci movimento» compare e sparisce senza dissolvenza ---------- */
/* v2 (24/10 07:45, Inoki): SOLO sullo sfondo nero (z-index -1: sotto a tutto, i quadratini e la carta restano puliti), bandiera
   INTERA (contain, larga quanto lo schermo, al centro), fissa mentre scorri, SEMPRE presente nella lingua della pagina.
   Appena cambi lingua: «sbam», compare forte e poi scende piano al livello fisso. */
.bandiera-sfondo{display:none}
.bandiera-subito,.bandiera .bandiera-sfondo{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--bandiera-img);background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.16}
/* 25/10: alta quanto lo schermo grande, così non salta quando la barra del browser compare e sparisce mentre scorri */
.bandiera-subito,.bandiera .bandiera-sfondo{bottom:auto;height:100vh;height:100lvh;will-change:transform;transform:translateZ(0)}
.bandiera.sbam .bandiera-sfondo{animation:sbam 7s ease-out both}
@keyframes sbam{0%{opacity:.5}20%{opacity:.5}100%{opacity:.16}}
@media (prefers-reduced-motion:reduce){.bandiera.sbam .bandiera-sfondo{animation:none}}
main,.testata,.piede{position:relative;z-index:1}
/* 25/10 15:04 Inoki: «bug sullo scroll delle bandiere, forse è la mia foto»: era così, la testata stava allo stesso livello di main e la foto copriva l elenco aperto. La testata va sopra */
.testata{z-index:6}
/* il logo piccolo in alto rifà l'entrata */
.testata .testata-nome{cursor:pointer}
/* l'ingresso nascosto al contatore: sembra testo normale */
.piede a.segreto{color:inherit;text-decoration:none}

/* conto alla rovescia (24/10): nel quadratino rosso e sul biglietto della prossima data */
.q-conto{display:block;margin-top:8px;font:900 1.15rem/1 var(--f-stencil);letter-spacing:.03em;color:var(--toner);background:var(--carta);align-self:flex-start;padding:5px 8px 4px;transform:rotate(-2deg)}
.q-conto:empty{display:none}
.b-conto{display:inline-block;margin:0 0 6px;font:900 1rem/1 var(--f-stencil);letter-spacing:.03em;color:var(--carta);background:var(--rosso-fondo);padding:5px 8px 4px;transform:rotate(-2deg)}
/* il quadratino a caso dall'archivio (24/10): cambia a ogni visita */
.q-caso .q img{filter:none}

/* ---------- stanze (24/10, Inoki: «un quadrato solo per le news, uno per le date, uno per il merch… quando entri nel quadrato trovi tutto»).
   muro.js: con un #sezione nell'indirizzo mostra SOLO quella sezione (html.stanza), con la barra «← Tutto il sito» in cima.
   Senza JS si vede tutta la pagina come prima. ---------- */
.stanza .apertura,.stanza main>section.zona:not(.aperta){display:none}
/* pagina iniziale (24/10, Inoki: «troppa roba in fondo, si ripete»): sotto i quadrati solo NEWS (l'elenco) e DATE; il resto si apre dai
   quadrati. Solo con JS (html.js dallo script in testa): senza JS e per i motori di ricerca la pagina resta intera */
.js:not(.stanza) main>section.zona[id]:not(#ultime):not(#date):not(#dischi):not(#nel-2026){display:none}
/* Dischi in pagina iniziale: solo le copertine (Inoki 24/10 10:36); scritte, J-card e condividi solo dentro la sezione */
.titolo-home{display:none}
.js:not(.stanza) .titolo-home{display:inline-block;margin:0 0 22px}
.js:not(.stanza) #dischi .jcard,.js:not(.stanza) #dischi .cassa li span,.js:not(.stanza) #dischi>.condividi,.js:not(.stanza) #dischi .cassa-nota{display:none}   /* + Dischi e 2026 (Inoki, 24/10 10:32) */
.js .schede .scheda{display:none}
.js .stanza .schede .scheda.attiva,.js.stanza .schede .scheda.attiva{display:block}
.stanza main>section.zona.aperta{margin-top:24px}
.torna{display:none}
.stanza .aperta>.torna{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;text-decoration:none;font:700 .875rem/1 var(--f-macchina);
  text-transform:uppercase;letter-spacing:.08em;color:var(--carta);border:1px dashed var(--nastro);padding:10px 14px 9px}
.stanza .aperta>.torna:hover,.stanza .aperta>.torna:focus-visible{color:var(--rosso);border-color:var(--rosso)}
.q-chi{background:var(--carta-2)}
/* date: «più info» e il dettaglio con il conto alla rovescia che si muove */
.biglietto{cursor:pointer}
.b-info{all:unset;cursor:pointer;display:inline-block;margin-top:6px;font:700 .75rem/1 var(--f-macchina);text-transform:uppercase;letter-spacing:.08em;color:var(--rosso-fondo);border-bottom:2px solid currentColor;padding-bottom:2px}
.b-info:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}
.b-dettaglio{grid-column:1/-1;display:none;margin-top:14px;border-top:2px dashed var(--toner);padding-top:14px}
.biglietto.dettaglio .b-dettaglio{display:block}
.b-dettaglio img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto 14px;box-shadow:0 8px 16px rgba(0,0,0,.4)}
.timer{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.timer>span{display:flex;flex-direction:column;align-items:center;min-width:64px;background:var(--toner);color:var(--carta);padding:8px 6px 6px}
.timer b{font:900 2.2rem/1 var(--f-stencil);letter-spacing:.02em;display:block}
.timer i{font:700 .6875rem/1.2 var(--f-macchina);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--nastro);margin-top:4px}
.timer b.scatta{animation:scatta .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes scatta{from{transform:translateY(-35%) scale(1.15);color:var(--rosso)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.timer b.scatta{animation:none}}

/* ---------- News automatiche (24/10): la cosa più fresca di ogni sezione, costruita da muro.js ---------- */
.news-intro{margin:-8px 0 20px;max-width:56ch;color:var(--carta)}
/* News come un giornale (Inoki 24/10: «a elenco, come un giornale, non a quadratini»): una riga per notizia */
.fresche,.giornale{list-style:none;margin:0;padding:0;max-width:760px;border-top:3px solid var(--carta)}
.fresche li,.giornale li{border-bottom:1px solid #3a3a3a}
.giornale .notizia{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;align-items:start;padding:14px 0;text-decoration:none;color:var(--carta)}
.giornale .notizia img{grid-row:1/span 3;width:96px;height:96px;object-fit:cover;filter:grayscale(1) contrast(1.15)}
.giornale .notizia.colore img{filter:none}
.giornale .n-occhiello{font:700 .75rem/1.3 var(--f-macchina);text-transform:uppercase;letter-spacing:.08em;color:var(--rosso)}
.giornale .n-titolo{font:900 1.5rem/1.05 var(--f-stencil);letter-spacing:.02em;overflow-wrap:anywhere}
.giornale .n-testo{font-size:.875rem;line-height:1.45;color:#c9c9c3}
.giornale .notizia:hover .n-titolo,.giornale .notizia:focus-visible .n-titolo{color:var(--rosso)}
.giornale .notizia:focus-visible{outline:2px solid var(--rosso);outline-offset:4px}
@media (min-width:700px){.giornale .notizia{grid-template-columns:150px minmax(0,1fr)}.giornale .notizia img{width:150px;height:110px}.giornale .n-titolo{font-size:1.9rem}}
.bacheca-date{margin-bottom:26px}
/* schede dei dischi (24/10): copertina, anno, tipo, etichetta, link, lettore al tocco, tracklist */
.stanza #dischi.con-scheda .cassa,.stanza #dischi.con-scheda .jcard,.stanza #dischi.con-scheda>.condividi{display:none}
.disco-scheda{max-width:820px;background-color:var(--carta);background-image:var(--grana-scura);color:var(--toner);padding:clamp(14px,3vw,26px);box-shadow:var(--ombra-carta);transform:rotate(-.3deg)}
.sd-testa{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:640px){.sd-testa{grid-template-columns:240px minmax(0,1fr);align-items:end}}
.sd-testa img{width:100%;height:auto;box-shadow:0 10px 18px rgba(0,0,0,.45)}
.sd-anno{margin:0;font:700 .8125rem/1.3 var(--f-macchina);text-transform:uppercase;letter-spacing:.1em;color:var(--rosso-fondo)}
.disco-scheda h3{margin:4px 0 8px;font:900 clamp(2rem,7vw,3rem)/.95 var(--f-stencil);letter-spacing:.01em}
.sd-nota{margin:0 0 8px;font-size:.875rem}
.sd-cred{margin:0 0 10px;font-size:.8125rem;color:#444}
.sd-link a{color:var(--toner);font-weight:700;margin-right:14px;text-underline-offset:3px}
.sd-play{all:unset;cursor:pointer;display:inline-block;margin-top:10px;background:var(--rosso-fondo);color:var(--carta);font:700 .9375rem/1 var(--f-macchina);padding:10px 14px 9px}
.sd-play:focus-visible{outline:3px solid var(--toner);outline-offset:3px}
.sd-player{margin-top:14px}
.sd-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.sd-h{margin:22px 0 8px;font:700 .875rem/1 var(--f-macchina);text-transform:uppercase;letter-spacing:.14em;border-bottom:2px solid var(--toner);padding-bottom:6px}
.sd-tracce{margin:0;padding:0 0 0 2.2em;font-size:.9375rem;line-height:1.5}
.sd-tracce li{padding:5px 0;border-bottom:1px dashed rgba(20,20,20,.3)}
.sd-tracce li{display:list-item}
.sd-t{margin-right:10px}
.sd-d{float:right;color:#555;font-size:.8125rem}
.disco-scheda .torna-scheda{color:var(--toner);border-color:var(--toner)}
/* interviste (24/10): elenco con miniatura; al tocco il video si carica al posto della miniatura */
.lista-int{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:900px}
@media (min-width:700px){.lista-int{grid-template-columns:repeat(2,minmax(0,1fr))}}
.intervista{background-color:var(--carta-2);color:var(--toner);padding:10px 10px 12px;box-shadow:0 12px 20px rgba(0,0,0,.5);transform:rotate(-.6deg)}
.intervista:nth-child(2n){transform:rotate(.5deg)}
.int-play{position:relative;display:block;aspect-ratio:16/9;background:#000}
.int-play img{width:100%;height:100%;object-fit:cover}
.int-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.int-btn{position:absolute;left:10px;bottom:10px;background:var(--rosso-fondo);color:var(--carta);font:900 1.1rem/1 var(--f-stencil);padding:7px 11px 6px}
.int-data{margin:10px 0 2px;font:700 .75rem/1.3 var(--f-macchina);letter-spacing:.08em;color:var(--rosso-fondo)}
.intervista h3{margin:0;font:900 1.35rem/1.05 var(--f-stencil);letter-spacing:.02em}
.int-sotto{margin:4px 0 0;font-size:.875rem}
.int-suo{margin:26px 0 0;max-width:60ch}
.int-suo a{color:var(--carta);font-weight:700;text-underline-offset:4px}
/* l'articolo di una notizia (24/10) */
.articolo{max-width:720px;background-color:var(--carta);background-image:var(--grana-scura);color:var(--toner);padding:clamp(18px,4vw,32px);box-shadow:var(--ombra-carta);transform:rotate(-.3deg)}
.a-data{margin:0 0 6px;font:700 .8125rem/1.3 var(--f-macchina);text-transform:uppercase;letter-spacing:.08em;color:var(--rosso-fondo)}
.a-titolo{margin:0 0 16px;font:900 clamp(2rem,8vw,3rem)/.95 var(--f-stencil);letter-spacing:.01em}
.a-img{display:block;width:100%;max-height:70vh;object-fit:contain;background:#111;margin:0 0 16px}
.a-testo{font-size:1.0625rem;line-height:1.65;max-width:60ch}
.a-vai a{display:inline-block;background:var(--toner);color:var(--carta);text-decoration:none;font:700 .875rem/1 var(--f-macchina);text-transform:uppercase;letter-spacing:.08em;padding:10px 14px 9px}
.a-vai a:hover{background:var(--rosso)}
.articolo .torna-scheda{color:var(--toner);border-color:var(--toner)}
/* 2026 a schede (24/10): tre quadrati; toccandone uno si apre solo quella scheda, condivisibile da sola */
.schede-q{margin-bottom:30px}
.stanza .schede .scheda{display:none}
.stanza .schede.con-scheda .schede-q{display:none}
.stanza .schede .scheda.attiva{display:block}
.stanza .schede.con-scheda>.condividi{display:none}
.stanza .schede.con-scheda .release{display:block}
.stanza .schede.con-scheda .note-2026{display:block}
.torna-scheda{display:inline-block;margin:0 0 16px;font:700 .8125rem/1 var(--f-macchina);text-transform:uppercase;letter-spacing:.08em;color:var(--carta);text-decoration:none;border:1px dashed var(--nastro);padding:8px 12px 7px}
.torna-scheda:hover{color:var(--rosso);border-color:var(--rosso)}
.scheda .torna-scheda{display:none}
.stanza .scheda.attiva>.torna-scheda,.stanza .scheda.attiva .torna-scheda{display:inline-block}
/* dischi: info e link del disco nel lettore */
.piatto-info{margin:0;padding:0 12px 10px;font-size:.875rem;color:var(--nastro)}
.piatto-info a{color:var(--carta);font-weight:700;margin-right:14px;text-underline-offset:3px}
.piatto-info a:hover{color:var(--rosso)}
.giradischi+.jcard,.cassa+.jcard{margin-top:34px}

/* il video di una serata sta nel suo biglietto e si vede con «Più info» (24/10) */
.b-video{display:none;margin-top:10px;max-width:260px}
.biglietto.dettaglio .b-video{display:block}
.b-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#000}

/* ---------- date: la prossima grande, le altre più piccole; le passate in archivio (24/10, Inoki) ---------- */
.biglietti>.biglietto.prima{grid-template-columns:120px minmax(0,1fr);padding:16px 16px 16px 14px;transform:rotate(-1deg)}
.biglietti>.biglietto.prima .b-giorno b{font-size:2.8rem}
.biglietti>.biglietto.prima .b-cosa h3{font-size:1.2rem}
.biglietti>.biglietto:not(.prima){max-width:640px;margin-left:clamp(0px,4vw,40px)}
@media (min-width:700px){.biglietti>.biglietto.prima{grid-template-columns:200px 170px minmax(0,1fr)}.biglietti>.biglietto.prima .b-giorno b{font-size:3.8rem}}
.archivio{margin-top:34px;max-width:760px}
.archivio summary{cursor:pointer;display:inline-block;font:700 .875rem/1.2 var(--f-macchina);text-transform:uppercase;letter-spacing:.1em;color:var(--carta);
  border:1px dashed var(--nastro);padding:9px 12px 8px}
.archivio summary::-webkit-details-marker{display:none}
.archivio summary::before{content:"+ "}
.archivio[open] summary::before{content:"− "}
.archivio summary:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}
.biglietti-passati{margin-top:16px;opacity:.75}
.biglietti-passati .biglietto{filter:grayscale(1)}
.bacheca-archivio{margin-top:22px}

/* ---------- condividi (24/10, Inoki: «per ogni cosa mi devi mettere condividi»). Lo aggiunge muro.js a ogni [data-condividi] ---------- */
.condividi{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px;clear:both}
.condividi button,.condividi a{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:700 .75rem/1 var(--f-macchina);text-transform:uppercase;letter-spacing:.06em;
  padding:7px 10px 6px;background:var(--toner);color:var(--carta);border:1px solid #444}
.condividi .cd-share{background:var(--rosso-fondo);border-color:var(--rosso-fondo)}
.condividi .cd-share::before{content:"";width:10px;height:10px;border:2px solid currentColor;border-top:0;border-right:0;transform:rotate(135deg) translate(-1px,-1px)}
.condividi button:hover,.condividi a:hover{filter:brightness(1.2)}
.condividi button:focus-visible,.condividi a:focus-visible{outline:2px solid var(--carta);outline-offset:2px}
/* la storia di Instagram, a mano ma sicura (24/10): immagine pronta + 3 passi */
.storia-ig{max-width:min(94vw,440px);max-height:94vh;overflow:auto;background:var(--toner);color:var(--carta);border:1px solid #333;padding:14px}
.storia-ig .chiudi{position:sticky;top:0;float:right;margin:0 0 6px 8px;z-index:2}
.storia-ig::backdrop{background:rgba(0,0,0,.88)}
.storia-ig img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;margin:0 auto 12px;-webkit-touch-callout:default}
.storia-passi{list-style:none;margin:0 0 12px;padding:0;font-size:.875rem;line-height:1.4}
.storia-passi li{display:grid;grid-template-columns:28px 1fr;gap:4px 8px;align-items:start;padding:8px 0;border-top:1px dashed #444}
.storia-passi b{font:900 1.3rem/1 var(--f-stencil);color:var(--rosso)}
.storia-passi button,.storia-passi a{all:unset;grid-column:2;justify-self:start;cursor:pointer;margin-top:6px;font:700 .8125rem/1 var(--f-macchina);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px 7px;background:var(--rosso);color:var(--carta)}
.storia-passi a{background:linear-gradient(45deg,#c13584,#e1306c 45%,#f77737)}
.condividi .cd-scelte{display:inline-flex;flex-wrap:wrap;gap:6px}
.condividi .cd-scelte[hidden]{display:none}
.condividi .cd-storia{background:linear-gradient(45deg,#c13584,#e1306c 45%,#f77737);border-color:transparent}
.condividi .cd-ok{font:700 .75rem/1 var(--f-macchina);color:var(--rosso)}
.zona>.condividi{margin-top:26px}
.polaroid .condividi,.maglia .condividi,.biglietto .condividi{margin-top:10px}
.biglietto .condividi{grid-column:1/-1}

/* ---------- quadratini (24/10): pezzi di carta di misure diverse, storti, con il nastro. Non card tutte uguali ---------- */
.quadratini{margin-top:clamp(40px,7vw,80px)}
.muro-q{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
.muro-q>li{display:flex}
.muro-q>li[hidden]{display:none}
.muro-q .q-largo{grid-column:span 2}
.q{position:relative;flex:1;display:flex;flex-direction:column;text-decoration:none;color:var(--toner);background-color:var(--carta);background-image:var(--grana-scura);
  box-shadow:0 12px 20px rgba(0,0,0,.55);padding:9px 9px 11px;transform:rotate(var(--r,-1deg))}
.muro-q>li:nth-child(3n) .q{--r:1.3deg}.muro-q>li:nth-child(4n) .q{--r:-.5deg}.muro-q>li:nth-child(5n) .q{--r:1.8deg}
.q img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.2)}
.q.colore img{filter:none}
.q-largo .q img{aspect-ratio:2/1}
.q-alto .q img{aspect-ratio:9/14}
.q-sub{display:block;margin-top:8px;font:700 .72rem/1.3 var(--f-macchina);text-transform:uppercase;letter-spacing:.06em;color:var(--rosso-fondo)}
.q-et{display:block;font:900 1.45rem/1.02 var(--f-stencil);letter-spacing:.02em;margin-top:3px;overflow-wrap:anywhere}
.q.rosso{background:var(--rosso-fondo);color:var(--carta)}.q.rosso .q-sub{color:var(--carta)}
.q.nero{background:#0e0e0e;color:var(--carta);outline:2px dashed #555;outline-offset:-8px}.q.nero .q-sub{color:#bbb}
.q.solo-testo{justify-content:flex-end;min-height:150px;padding:14px}
.q.solo-testo .q-et{font-size:2.3rem}
.q .nastro{top:-12px;left:32%;transform:rotate(-6deg)}
.q:hover,.q:focus-visible{transform:rotate(0) translateY(-3px);box-shadow:0 18px 26px rgba(0,0,0,.6)}
.q:focus-visible{outline:3px solid var(--rosso);outline-offset:3px}
@media (min-width:900px){
  .muro-q{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 26px}
  .muro-q .q-alto{grid-row:span 2}
  /* righe fisse: un'immagine verticale (il video della news) non deve allungare tutta la riga */
  .muro-q{grid-auto-rows:300px}
  .q{overflow:hidden}
  .q img{flex:1 1 0;min-height:0;height:0;aspect-ratio:auto}
  .q-largo .q img{object-position:center 22%}
  .q-largo .q img,.q-alto .q img{aspect-ratio:auto}
}
/* entrata a cascata al caricamento (solo CSS: se qualcosa va storto i quadratini restano comunque visibili).
   Con il sipario partono quando le metà si aprono. Niente animazione allo scorrimento (regola di GC) */
@media (prefers-reduced-motion:no-preference){
  .muro-q>li{animation:cala .5s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(.25s + var(--i,0) * 70ms)}
  .intro .muro-q>li{animation-delay:calc(2.1s + var(--i,0) * 70ms)}
  .muro-q>li:nth-child(1){--i:0}.muro-q>li:nth-child(2){--i:1}.muro-q>li:nth-child(3){--i:2}.muro-q>li:nth-child(4){--i:3}.muro-q>li:nth-child(5){--i:4}
  .muro-q>li:nth-child(6){--i:5}.muro-q>li:nth-child(7){--i:6}.muro-q>li:nth-child(8){--i:7}.muro-q>li:nth-child(9){--i:8}
}
@keyframes cala{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- merch: le jersey (24/10) ---------- */
.merch-t{font:900 clamp(2.6rem,10vw,3.8rem)/.9 var(--f-stencil);letter-spacing:.03em;color:var(--carta);margin:0 0 12px;transform:rotate(-1deg);display:inline-block}
.merch-intro{max-width:52ch;margin:0 0 22px}
.maglie{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:26px}
.maglia{width:min(80vw,320px);background-color:var(--carta-2);color:var(--toner);padding:10px 10px 14px;box-shadow:0 14px 24px rgba(0,0,0,.55);transform:rotate(-1.2deg)}
.maglia:nth-child(2n){transform:rotate(1.4deg)}
.maglia img{width:100%;height:auto}
.maglia h3{margin:10px 0 2px;font:900 1.4rem/1.05 var(--f-stencil);letter-spacing:.02em}
.maglia p{margin:0 0 10px;font-size:.875rem}
.compra{display:inline-block;background:var(--rosso-fondo);color:var(--carta);text-decoration:none;font:700 .9375rem/1.2 var(--f-macchina);padding:10px 14px 9px}
.compra:hover,.compra:focus-visible{background:#c91d15}
.maglia .prezzo{font-weight:700;color:var(--rosso-fondo)}
.compra.esaurito{background:#555}
.compra.esaurito:hover{background:#333}
.compra:focus-visible{outline:3px solid var(--toner);outline-offset:3px}
.merch-nota{margin:22px 0 0;max-width:60ch;font-size:.875rem;color:var(--nastro)}

/* ---------- date: biglietti strappati, il volantino come matrice (23/10) ---------- */
.date-t{font:900 clamp(2.6rem,10vw,3.8rem)/.9 var(--f-stencil);letter-spacing:.03em;color:var(--carta);margin:0 0 22px;transform:rotate(1.2deg);display:inline-block}
.biglietti{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:760px}
.biglietto{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-areas:"vol giorno" "vol cosa";column-gap:14px;align-items:start;
  background-color:var(--carta);background-image:var(--grana-scura);color:var(--toner);padding:12px 14px 12px 12px;border-left:3px dashed var(--toner);
  box-shadow:0 10px 18px rgba(0,0,0,.5);transform:rotate(-.6deg)}
.biglietto:nth-child(2n){transform:rotate(.5deg)}
.b-volantino{grid-area:vol;display:block}
.b-volantino img{width:100%;height:auto;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.b-volantino:focus-visible{outline:3px solid var(--rosso);outline-offset:2px}
.b-giorno{grid-area:giorno;margin:0;font:700 .8125rem/1 var(--f-macchina);color:var(--rosso-fondo)}
.b-giorno b{font:900 2rem/1 var(--f-stencil);letter-spacing:.02em;color:var(--rosso-fondo);margin-right:.35em}
.b-cosa{grid-area:cosa}
.b-cosa h3{margin:6px 0 4px;font:700 1.02rem/1.25 var(--f-macchina)}
.b-cosa p{margin:0 0 3px;font-size:.875rem;line-height:1.4}
.b-dove{font-weight:700}
.b-link a{font-weight:700;color:var(--toner);text-underline-offset:3px}
.b-link a:hover{color:var(--rosso-fondo)}
@media (min-width:700px){.biglietto{grid-template-columns:120px 150px minmax(0,1fr);grid-template-areas:"vol giorno cosa";column-gap:20px;align-items:center}
  .b-giorno b{display:block;font-size:2.8rem;margin:0 0 4px}}

/* ---------- chi è: la fanzine ---------- */
.fanzine{position:relative;max-width:800px;margin-left:clamp(0px,5vw,80px);padding:clamp(26px,5vw,56px) clamp(18px,5vw,64px) clamp(30px,5vw,58px);
  transform:rotate(.5deg);box-shadow:var(--ombra-carta),inset 0 0 50px rgba(0,0,0,.13)}
.fanzine h2{font:700 1.45rem/1.2 var(--f-macchina);letter-spacing:.32em;margin:0 0 1.1em}
.fanzine h2::after{content:"=====================";display:block;letter-spacing:0;overflow:hidden;white-space:nowrap;width:9.5ch;font-weight:400}
.fanzine>p{max-width:60ch}
.tag{font:400 1.45em/1 var(--f-pennarello);color:var(--rosso);display:inline-block;transform:rotate(-4deg);padding:0 .1em}
.graffettata{position:relative;float:right;width:min(44%,300px);margin:-6px -4px 18px 26px;padding:8px 8px 6px;background:var(--carta-2);transform:rotate(2.6deg);box-shadow:0 8px 14px rgba(0,0,0,.28)}
.graffettata img{width:100%}
.graffettata figcaption{font-size:.8125rem;line-height:1.35;padding-top:6px}
.graffetta{position:absolute;top:-7px;left:38%;width:48px;height:12px;border:2px solid #7c7c78;border-bottom:0;border-radius:2px 2px 0 0;transform:rotate(-6deg)}
.anni{list-style:none;margin:1.8em 0 1.6em;padding:0;clear:both}
.anni li{display:grid;grid-template-columns:6.4rem minmax(0,1fr);column-gap:14px;align-items:start;margin:0 0 .85em}
/* la cronologia collegata (24/10): sotto ogni anno, i link a disco, video, foto e intervista di quel periodo */
.t-links{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
@media (max-width:620px){.t-links{grid-column:1}}
.t-link{display:inline-flex;align-items:center;gap:5px;font:700 .6875rem/1 var(--f-macchina);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:var(--carta);background:var(--toner);padding:6px 8px 5px}
.t-link::before{content:"";width:0;height:0;border-style:solid;border-width:.35em 0 .35em .55em;border-color:transparent transparent transparent currentColor}
.t-link.t-foto::before,.t-link.t-int::before{width:.6em;height:.6em;border:2px solid currentColor}
.t-link:hover,.t-link:focus-visible{background:var(--rosso-fondo)}
.carta a.t-link,.carta a.t-link:visited{color:var(--carta)}
.timbro{justify-self:start;font:800 1.2rem/1 var(--f-stencil);letter-spacing:.05em;color:var(--timbro);border:2px solid currentColor;padding:.2em .32em .12em;
  white-space:nowrap;transform:rotate(var(--t,-2.5deg));-webkit-mask-image:var(--inchiostro);mask-image:var(--inchiostro);-webkit-mask-size:160px;mask-size:160px;opacity:.92;margin-top:.1em}
.anni li:nth-child(3n+2) .timbro{--t:2deg}
.anni li:nth-child(3n) .timbro{--t:-.8deg}
.con{border-top:1px dashed rgba(20,20,20,.5);padding-top:1em;font-size:.95rem}
.con b{letter-spacing:.06em}
.stampa-ombra{filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));max-width:470px;margin:2.2em -8px 0 auto;position:relative}
.stampa{margin:0;background:#cfcfc8 var(--grana-scura);color:var(--toner);padding:22px 24px 16px;clip-path:polygon(0.0% 4.8px,3.3% 4.9px,6.6% 2.8px,8.3% 5.9px,10.1% 5.8px,13.2% 1.8px,16.1% 4.8px,18.9% 4.6px,21.1% 3.3px,23.8% 3.7px,26.5% 3.5px,29.1% 5.6px,31.0% 3.5px,33.4% 5.2px,35.7% 2.8px,38.6% 5.4px,42.0% 5.5px,45.3% 3.3px,47.8% 3.8px,50.2% 5.6px,52.3% 4.6px,54.0% 3.4px,55.6% 2.1px,58.1% 2.6px,60.3% 4.5px,62.5% 1.8px,65.7% 5.5px,68.3% 2.3px,70.9% 5.6px,72.9% 2.5px,74.6% 5.8px,76.8% 4.5px,78.6% 3.5px,81.1% 3.6px,84.5% 4.3px,87.3% 3.9px,89.3% 2.6px,92.5% 2.0px,95.5% 3.6px,98.4% 5.7px,100% 4.1px,calc(100% - 1.2px) 1.7%,calc(100% - 3.2px) 4.8%,calc(100% - 4.8px) 7.7%,calc(100% - 4.7px) 11.0%,calc(100% - 5.5px) 12.9%,calc(100% - 4.8px) 15.8%,calc(100% - 5.3px) 17.5%,calc(100% - 4.5px) 20.3%,calc(100% - 3.4px) 22.4%,calc(100% - 2.1px) 24.4%,calc(100% - 4.3px) 27.6%,calc(100% - 2.6px) 29.4%,calc(100% - 1.5px) 31.9%,calc(100% - 3.2px) 35.1%,calc(100% - 5.4px) 37.1%,calc(100% - 1.6px) 39.1%,calc(100% - 3.9px) 42.3%,calc(100% - 3.0px) 44.6%,calc(100% - 3.6px) 47.5%,calc(100% - 1.7px) 49.2%,calc(100% - 5.8px) 51.4%,calc(100% - 2.3px) 53.3%,calc(100% - 4.0px) 56.1%,calc(100% - 3.1px) 57.9%,calc(100% - 1.1px) 61.2%,calc(100% - 3.8px) 62.9%,calc(100% - 1.7px) 65.8%,calc(100% - 1.3px) 67.4%,calc(100% - 1.2px) 69.5%,calc(100% - 1.8px) 72.5%,calc(100% - 1.5px) 74.4%,calc(100% - 4.2px) 76.4%,calc(100% - 3.5px) 79.2%,calc(100% - 5.9px) 81.5%,calc(100% - 5.7px) 83.2%,calc(100% - 6.0px) 86.5%,calc(100% - 2.2px) 88.4%,calc(100% - 3.2px) 90.1%,calc(100% - 2.3px) 92.3%,calc(100% - 4.0px) 95.0%,calc(100% - 4.1px) 98.0%,calc(100% - 5.0px) 99.8%,calc(100% - 4.5px) 100%,99.3% calc(100% - 1.1px),96.2% calc(100% - 3.3px),94.0% calc(100% - 3.1px),92.2% calc(100% - 3.4px),89.4% calc(100% - 2.0px),87.8% calc(100% - 3.9px),85.5% calc(100% - 1.4px),82.1% calc(100% - 2.4px),80.0% calc(100% - 2.9px),77.3% calc(100% - 5.7px),74.0% calc(100% - 1.4px),71.5% calc(100% - 4.8px),69.3% calc(100% - 2.0px),66.2% calc(100% - 3.9px),64.4% calc(100% - 3.0px),62.5% calc(100% - 3.3px),60.0% calc(100% - 4.8px),57.6% calc(100% - 3.0px),55.9% calc(100% - 1.6px),53.3% calc(100% - 1.6px),50.8% calc(100% - 1.4px),48.4% calc(100% - 5.3px),45.5% calc(100% - 4.2px),42.1% calc(100% - 5.8px),38.9% calc(100% - 4.5px),36.9% calc(100% - 1.1px),34.2% calc(100% - 4.3px),32.0% calc(100% - 4.9px),29.6% calc(100% - 4.6px),27.0% calc(100% - 3.5px),25.0% calc(100% - 2.8px),23.0% calc(100% - 3.3px),21.1% calc(100% - 5.0px),19.3% calc(100% - 2.3px),17.3% calc(100% - 3.6px),14.4% calc(100% - 3.4px),12.6% calc(100% - 5.8px),10.2% calc(100% - 5.0px),8.6% calc(100% - 5.7px),7.0% calc(100% - 5.2px),4.4% calc(100% - 2.5px),2.1% calc(100% - 2.2px),0.0% calc(100% - 3.4px),1.1px 98.9%,4.0px 97.0%,5.4px 94.4%,1.9px 91.4%,3.6px 88.0%,3.4px 85.6%,3.0px 82.8%,4.6px 80.4%,5.7px 77.1%,4.5px 75.1%,3.4px 72.2%,5.8px 69.7%,2.7px 67.9%,4.7px 64.9%,4.3px 61.6%,4.8px 59.0%,5.3px 57.2%,2.1px 54.7%,4.1px 52.3%,3.0px 49.5%,4.3px 46.7%,5.9px 44.7%,4.2px 42.5%,1.1px 40.7%,3.3px 37.9%,4.6px 34.6%,5.4px 31.3%,4.3px 29.6%,5.1px 27.9%,1.1px 25.5%,5.7px 23.6%,4.6px 20.3%,4.0px 18.0%,5.5px 16.2%,5.4px 13.2%,1.5px 10.5%,5.1px 7.3%,4.8px 4.4%,2.0px 2.1%);transform:rotate(-1.8deg)}
.stampa p{font:800 clamp(1.3rem,4.4vw,1.75rem)/1.06 var(--f-stencil);margin:0 0 .5em;letter-spacing:.01em}
.stampa cite{display:block;font:400 .8125rem/1.4 var(--f-macchina);font-style:normal}
.stampa .rosso{color:#b5170f}
@media (max-width:620px){
  .graffettata{float:none;width:82%;margin:0 0 22px auto}
  .anni li{grid-template-columns:minmax(0,1fr)}
  .timbro{margin-bottom:.35em}
}

/* ---------- 2026: il volantino ---------- */
.release{display:grid;gap:34px;align-items:start}
.volantino{position:relative;padding:clamp(22px,5vw,44px) clamp(18px,5vw,42px) clamp(24px,5vw,40px);color:var(--toner);
  background:linear-gradient(rgba(223,223,218,.28),rgba(223,223,218,.28)),#8d8d89 url('/img/fondazione-strada-cemento.webp') center/cover;
  transform:rotate(-1.1deg);box-shadow:var(--ombra-carta)}
.vol-chi{font:700 1rem/1 var(--f-macchina);letter-spacing:.32em;margin:0 0 .7em}
.vol-titolo{font:900 clamp(2.6rem,12.4vw,6rem)/.84 var(--f-stencil);letter-spacing:.01em;margin:0 0 .22em}
.vol-info{display:inline-block;background:var(--toner);color:var(--carta);font:700 .92rem/1.4 var(--f-macchina);padding:6px 10px;margin:0 0 1.2em;transform:rotate(.6deg)}
.tracce{margin:0 0 1.2em;padding:0 0 0 2.2em;font:700 .98rem/1.55 var(--f-macchina);columns:1}
.tracce li::marker{font-weight:400}
.tracce li{break-inside:avoid}
.tracce small{font-weight:400;font-size:.82rem;white-space:nowrap}
.vol-insieme{font-size:.95rem;margin-bottom:1em}
.vol-link{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 1.1em;font-weight:700}
.vol-link a{padding:4px 0}
.player{background:var(--toner);color:var(--carta);padding:12px 14px;min-height:64px}
.player button{all:unset;cursor:pointer;display:inline-block;font:700 .95rem/1.3 var(--f-macchina);border-bottom:2px solid var(--rosso);padding:4px 0}
.player button:focus-visible{outline:3px solid var(--rosso);outline-offset:3px}
.player small{display:block;color:var(--nastro);font-size:.8125rem;line-height:1.4;margin-top:6px}
.player iframe{display:block;width:100%;border:0;background:#000}
.note-2026{display:grid;gap:26px}
.nota{position:relative;padding:22px 20px 16px;box-shadow:0 10px 18px rgba(0,0,0,.45)}
.nota:nth-child(1){transform:rotate(1.8deg)}
.nota:nth-child(2){transform:rotate(-1.2deg);background-color:#d4d4cf}
.nota .nastro{top:-12px;left:30%;transform:rotate(3deg)}
.nota-data{font:400 1.2rem/1 var(--f-pennarello);color:var(--rosso-penna);margin:0 0 .3em}
.nota h3{font:900 clamp(1.9rem,7.6vw,2.6rem)/.9 var(--f-stencil);margin:0 0 .35em}
.nota h3 small{display:block;font-size:.55em;font-weight:800;margin-top:.15em}
.nota blockquote{margin:0 0 .8em;font-weight:700}
.nota blockquote cite{font-weight:400;font-style:normal;font-size:.82rem}
.nota p{font-size:.97rem}
.nota .vol-link{margin:0}
@media (min-width:640px){.tracce{columns:2;column-gap:2.4em}}
@media (min-width:900px){
  .release{grid-template-columns:minmax(0,580px) minmax(0,1fr);gap:0 40px}
  .note-2026{padding-top:70px;margin-left:-30px}
}

/* ---------- dischi: la cassetta ---------- */
.jcard{display:grid;grid-template-columns:minmax(0,1fr);transform:rotate(.35deg);box-shadow:var(--ombra-carta)}
.dorso{background:var(--toner-2);color:var(--carta);padding:14px 18px;border:1px solid #2c2c2c;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dorso h2{font:900 clamp(2.2rem,9vw,3rem)/1 var(--f-stencil);letter-spacing:.06em}
.dorso span{font:700 .8125rem/1.3 var(--f-macchina);letter-spacing:.14em;color:var(--nastro);text-transform:uppercase}
.lato{padding:20px clamp(16px,3vw,26px) 24px}
.lato+.lato{border-top:1px dashed rgba(20,20,20,.45)}
.lato h3{font:700 .85rem/1.9rem var(--f-macchina);letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--toner);margin-bottom:0}
.lato ul{list-style:none;margin:0;padding:0;font-size:1rem;line-height:1.9rem;
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(1.9rem - 1px),rgba(35,48,168,.38) calc(1.9rem - 1px) 1.9rem)}
.lato li{display:grid;grid-template-columns:3.3rem minmax(0,1fr);column-gap:.5rem}
.lato .anno{font:800 1.12rem/1.9rem var(--f-stencil);letter-spacing:.04em}
.lato .titolo{font-weight:700}
.lato a.titolo{text-decoration:none;border-bottom:2px solid transparent}
.lato a.titolo:hover,.lato a.titolo:focus-visible{border-bottom-color:var(--rosso)}
.lato .nota-d{grid-column:2;font-size:.84rem;line-height:1.9rem;color:#333}
.lato .pmc{font-size:.84rem;line-height:1.9rem;margin:0}
@media (min-width:900px){
  .jcard{grid-template-columns:84px minmax(0,1fr) minmax(0,1fr)}
  .dorso{flex-direction:column;justify-content:center;padding:18px 10px}
  .dorso h2,.dorso span{writing-mode:vertical-rl;transform:rotate(180deg)}
  .dorso h2{font-size:3rem}
  .lato+.lato{border-top:0;border-left:1px dashed rgba(20,20,20,.45)}
}
.cassa{margin-top:40px}
.cassa-nota{font:400 1.35rem/1.2 var(--f-pennarello);color:var(--carta);transform:rotate(-2deg);margin:0 0 4px 6px;display:inline-block}
.cassa ul{list-style:none;margin:0;padding:20px 6px 18px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--rosso) transparent}
.cassa li{flex:0 0 auto;width:clamp(136px,30vw,184px);scroll-snap-align:start;transform:translateY(var(--y,0)) rotate(var(--r,-1.5deg));transition:transform .15s ease}
.cassa li:nth-child(3n+2){--r:1.8deg;--y:8px}
.cassa li:nth-child(3n){--r:-.6deg;--y:-4px}
.cassa a{display:block;text-decoration:none;color:var(--carta)}
.cassa img{width:100%;aspect-ratio:1;box-shadow:0 8px 16px rgba(0,0,0,.6)}
.cassa span{display:block;font:400 .8125rem/1.35 var(--f-macchina);color:var(--nastro);margin-top:8px}
.cassa li:hover,.cassa li:focus-within{transform:translateY(-6px) rotate(0)}
@media (min-width:1200px){
  .cassa ul{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:26px 18px;overflow:visible;padding:20px 6px 10px}
  .cassa li{width:auto}
  .cassa-nota .freccia{display:none}
}

/* ---------- video: le VHS ---------- */
.video{display:grid;gap:30px}
.tv{position:relative;background:#090909;border:clamp(10px,1.8vw,16px) solid #222;outline:1px solid #343434;box-shadow:0 22px 40px rgba(0,0,0,.6);align-self:start}
.tv h2{position:absolute;z-index:3;top:-24px;left:18px;transform:rotate(-3deg);background:rgba(214,212,200,.94) var(--grana-scura);color:var(--toner);
  font:400 1.55rem/1 var(--f-pennarello);padding:8px 22px 6px;clip-path:polygon(5.6% 0.0%,5.8% 14.3%,3.4% 28.6%,1.8% 42.9%,0.0% 57.1%,4.6% 71.4%,3.3% 85.7%,5.3% 100.0%,95.2% 100.0%,96.2% 85.7%,97.1% 71.4%,94.9% 57.1%,94.4% 42.9%,98.1% 28.6%,94.6% 14.3%,97.4% 0.0%)}
.schermo{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.schermo img{width:100%;height:100%;object-fit:cover}
.schermo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.schermo .cartello{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:var(--toner) var(--grana-chiara);
  font:900 clamp(1.8rem,6vw,3.4rem)/.9 var(--f-stencil);color:var(--carta);letter-spacing:.02em}
.play{all:unset;position:absolute;inset:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 clamp(12px,3vw,26px) clamp(12px,3vw,26px)}
.play span{display:inline-flex;align-items:center;gap:.45em;background:var(--rosso);color:var(--carta);font:900 clamp(1.3rem,4vw,1.8rem)/1 var(--f-stencil);letter-spacing:.1em;
  padding:.45em .8em .4em .7em;transform:rotate(-2deg);box-shadow:0 6px 14px rgba(0,0,0,.6)}
.play span::before{content:"";width:0;height:0;border-style:solid;border-width:.42em 0 .42em .7em;border-color:transparent transparent transparent currentColor}
.play:focus-visible span{outline:3px solid var(--carta);outline-offset:3px}
.play:hover span{background:#c91d15}
.sotto-tv{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:10px 2px 0;font-size:.86rem;color:var(--nastro)}
.sotto-tv b{color:var(--carta)}
.pila{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.vhs{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 12px 8px 10px;text-decoration:none;color:var(--toner);
  background:#0e0e0e repeating-linear-gradient(90deg,#191919 0 3px,#0c0c0c 3px 7px);border-top:1px solid #2b2b2b;border-bottom:1px solid #050505;
  transform:translateX(var(--x,0));transition:transform .15s ease;box-shadow:0 3px 6px rgba(0,0,0,.5)}
.pila li:nth-child(2n) .vhs{--e:.7deg}
.pila li:nth-child(3n) .vhs{--x:6px}
.vhs .etichetta{flex:1;min-width:0;background:var(--carta-2);padding:5px 10px 3px;font:400 1.18rem/1.15 var(--f-pennarello);transform:rotate(var(--e,-.5deg))}
.vhs .anno-v{font:700 .8125rem/1 var(--f-macchina);color:var(--nastro);flex:0 0 auto}
.vhs:hover{--x:-8px}
.vhs[aria-current="true"]{--x:-16px;box-shadow:inset 5px 0 0 var(--rosso),0 3px 6px rgba(0,0,0,.5)}
.vhs[aria-current="true"] .anno-v{color:var(--rosso-vivo)}
.canale{margin-top:14px;font-weight:700}
@media (min-width:900px){.video{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:40px;align-items:start}.pila{padding-top:6px;gap:4px}.vhs{min-height:42px;padding-top:4px;padding-bottom:4px}.canale{margin-top:10px}}

/* ---------- foto: i provini ---------- */
.foglio{background:#0b0b0b;border:1px solid #232323;padding:24px clamp(10px,2.4vw,28px) 26px;transform:rotate(-.4deg);box-shadow:0 22px 40px rgba(0,0,0,.6)}
.foglio h2{font:700 .86rem/1.2 var(--f-macchina);letter-spacing:.34em;text-transform:uppercase;color:var(--nastro);margin:0 0 18px}
.foglio h2 span{color:var(--rosso)}
.fotogrammi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px;align-items:start}
.fotogrammi+.fotogrammi{margin-top:20px}
.rullino{font:700 .8125rem/1.2 var(--f-macchina);letter-spacing:.22em;text-transform:uppercase;color:var(--carta);margin:26px 0 12px;padding-top:12px;border-top:1px dashed #333}
.foglio h2+.rullino{margin-top:0;border-top:0;padding-top:0}
.fotogrammi+.rullino{margin-top:30px}
.fotogrammi>li:only-child{max-width:340px}

/* Foto: un quadrato per album (24/10); dentro l'album solo le sue foto */
.album-q{margin:0 0 10px}
.album-q .q-sub{color:var(--rosso-fondo)}
.foglio .album-q .q{transform:rotate(var(--r,-1deg))}
.stanza #foto.con-scheda .foglio>.condividi{display:none}
.album>.rullino{margin-top:0;border-top:0;padding-top:0}
.fotogramma{position:relative;margin:0}
.fotogramma a{display:block;padding:11px 0;background-color:#020202;
  background-image:repeating-linear-gradient(90deg,#3b3a37 0 7px,transparent 7px 15px),repeating-linear-gradient(90deg,#3b3a37 0 7px,transparent 7px 15px);
  background-size:100% 5px;background-position:0 3px,0 calc(100% - 3px);background-repeat:no-repeat}
.fotogramma img{width:100%;height:auto}
.fotogramma figcaption{font:400 .8125rem/1.38 var(--f-macchina);color:var(--nastro);margin-top:7px}
.fotogramma figcaption b{color:var(--carta);font-weight:700}
/* v2 (24/10, Inoki: «i riquadri delle foto singole fammeli più belli»): polaroid di carta, storte, con l'ombra, invece della pellicola */
.fotogrammi{gap:26px 18px}
.fotogramma{background-color:var(--carta-2);background-image:var(--grana-scura);padding:9px 9px 12px;box-shadow:0 14px 24px rgba(0,0,0,.6);transform:rotate(var(--rr,-1.2deg));transition:transform .2s ease}
.fotogrammi>li:nth-child(2n) .fotogramma{--rr:1.1deg}
.fotogrammi>li:nth-child(3n) .fotogramma{--rr:-.4deg}
.fotogrammi>li:nth-child(5n) .fotogramma{--rr:1.8deg}
.fotogramma a{padding:0!important;background:none!important;box-shadow:none!important}
.fotogramma a::before,.fotogramma a::after{content:none!important;display:none!important}
.fotogramma img{display:block;width:100%;height:auto;aspect-ratio:var(--a,1.5);object-fit:cover}
.fotogramma figcaption{color:#444;margin-top:9px;font-size:.8125rem}
.fotogramma figcaption b{color:var(--toner)}
.fotogramma:hover{transform:rotate(0) scale(1.02)}
.fotogramma .cerchio{display:none}
@media (prefers-reduced-motion:reduce){.fotogramma{transition:none}}
.cerchio{position:absolute;left:-16px;top:-14px;width:calc(100% + 30px);height:calc(100% - 26px);pointer-events:none;overflow:visible;z-index:2}
@media (min-width:760px){
  .fotogrammi{display:flex;flex-wrap:nowrap;gap:12px}
  .fotogrammi>li{flex:var(--a,1.5) 1 0;min-width:0}
  .fotogrammi+.fotogrammi{margin-top:26px}
}
dialog.lente{border:0;padding:0;background:transparent;color:var(--carta);max-width:min(94vw,1200px);max-height:94vh;overflow:visible}
dialog.lente::backdrop{background:rgba(8,8,8,.93)}
dialog.lente img{max-width:100%;max-height:82vh;width:auto;margin:0 auto;box-shadow:0 20px 50px rgba(0,0,0,.7)}
dialog.lente p{font-size:.88rem;color:var(--nastro);margin:10px 0 0;max-width:70ch}
.chiudi{all:unset;cursor:pointer;position:absolute;top:-14px;right:-6px;background:var(--rosso-fondo);color:var(--carta);font:700 .9rem/1 var(--f-macchina);padding:10px 14px;transform:rotate(2deg);z-index:2}
.chiudi:focus-visible{outline:3px solid var(--carta);outline-offset:2px}

/* ---------- ULTRAS RIOT: la pezza ---------- */
.striscione{position:relative;margin:0 clamp(12px,4vw,56px);padding:clamp(10px,2vw,20px) clamp(14px,3vw,34px) clamp(12px,2vw,20px);
  background-color:var(--carta-2);color:var(--toner);
  background-image:linear-gradient(90deg,transparent 0 31%,rgba(0,0,0,.06) 33%,transparent 36% 71%,rgba(0,0,0,.05) 73%,transparent 76%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px);
  border-top:clamp(9px,1.5vw,16px) solid var(--toner);border-bottom:clamp(9px,1.5vw,16px) solid var(--rosso);
  transform:rotate(-1.3deg);box-shadow:0 20px 34px rgba(0,0,0,.55)}
.striscione::before,.striscione::after{content:"";position:absolute;top:6px;width:clamp(12px,4vw,56px);height:3px;background:#a0998a}
.striscione::before{right:100%;transform:rotate(-20deg);transform-origin:right}
.striscione::after{left:100%;transform:rotate(18deg);transform-origin:left}
.striscione h2{font:900 clamp(3.7rem,17.5vw,12.5rem)/.82 var(--f-stencil);letter-spacing:.02em;display:flex;flex-wrap:wrap;column-gap:.2em}
.striscione h2 .riot{color:var(--rosso)}
.striscione p{font:700 clamp(.8rem,2.6vw,1.1rem)/1.35 var(--f-macchina);letter-spacing:.12em;text-transform:uppercase;margin:.55em 0 0}
.curva-corpo{display:grid;gap:34px;margin-top:46px}
.serigrafia{position:relative;margin:0;transform:rotate(1.4deg);box-shadow:var(--ombra-carta);align-self:start}
.serigrafia .nastro{top:-12px;right:12%;transform:rotate(-6deg)}
.serigrafia figcaption{position:absolute;left:0;bottom:0;background:var(--toner);color:var(--nastro);font-size:.8125rem;line-height:1.35;padding:5px 9px}
.curva-testo .fifa{font:900 clamp(2.3rem,8vw,3.6rem)/.92 var(--f-stencil);color:var(--rosso);margin:0 0 .2em}
.curva-testo .chi{font-size:.85rem;color:var(--nastro);margin-bottom:1.4em}
.curva-testo .gioca{font:900 clamp(1.5rem,5vw,2rem)/1 var(--f-stencil);color:var(--carta);margin:0 0 .9em;letter-spacing:.02em}
.curva-testo .nota-f{font-size:.86rem;color:var(--nastro)}
.vai{display:inline-block;margin-top:.4em;background:var(--rosso);color:var(--carta);text-decoration:none;font:900 1.5rem/1 var(--f-stencil);letter-spacing:.06em;padding:.4em .6em .34em;transform:rotate(-1.5deg)}
.vai:hover{background:#c91d15}
@media (min-width:900px){.curva-corpo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px}}

/* ---------- canali: le linguette ---------- */
.canali{display:flex;flex-wrap:wrap;justify-content:center}
/* le email in Contatti (24/10): un biglietto da visita */
.scrivi{width:min(100%,520px);margin:0 0 34px;background-color:var(--carta-2);color:var(--toner);padding:18px clamp(16px,4vw,26px) 14px;transform:rotate(-.8deg);box-shadow:0 12px 20px rgba(0,0,0,.5)}
.scrivi h3{margin:0 0 8px;font:900 1.6rem/1 var(--f-stencil);letter-spacing:.04em}
.scrivi ul{list-style:none;margin:0;padding:0}
.scrivi li{padding:9px 0;border-top:1px dashed rgba(20,20,20,.45)}
.scrivi b{display:block;font:700 .75rem/1.3 var(--f-macchina);text-transform:uppercase;letter-spacing:.1em;color:var(--rosso-fondo)}
.scrivi a{font:700 1.1rem/1.4 var(--f-macchina);color:var(--toner);text-underline-offset:4px;overflow-wrap:anywhere}
.scrivi a:hover,.scrivi a:focus-visible{color:var(--rosso-fondo)}
@media (min-width:900px){.canali .scrivi{grid-column:1/-1}}
/* gli altri profili di Inoki (20/10): un ritaglio sotto il volantino */
.altrove{position:relative;width:min(100%,520px);margin:38px 0 0 clamp(0px,4vw,40px);filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.altrove .nastro{top:-10px;left:40%;transform:rotate(3deg)}
.altrove-corpo{padding:24px clamp(18px,5vw,28px) 14px;transform:rotate(-.7deg);clip-path:polygon(0.0% 1.5px,1.8% 2.3px,5.0% 3.9px,7.9% 3.8px,10.0% 4.7px,12.5% 2.7px,14.9% 4.3px,17.7% 3.7px,20.7% 2.2px,22.5% 3.4px,24.1% 4.5px,27.2% 4.4px,29.6% 3.0px,32.6% 3.4px,34.2% 1.1px,36.6% 2.0px,39.5% 4.2px,41.5% 2.7px,44.8% 1.7px,48.0% 3.2px,49.7% 3.8px,51.3% 3.7px,53.9% 2.5px,57.2% 2.8px,59.5% 3.0px,61.5% 4.1px,63.8% 3.1px,65.5% 2.6px,67.5% 3.0px,69.9% 1.1px,72.3% 1.2px,74.4% 3.8px,76.4% 4.9px,78.4% 3.4px,80.8% 2.6px,82.9% 1.7px,84.6% 3.0px,87.7% 4.9px,90.3% 4.1px,93.0% 3.2px,95.0% 4.4px,98.3% 1.9px,100% 3.1px,calc(100% - 1.1px) 3.3%,calc(100% - 1.1px) 6.0%,calc(100% - 4.0px) 8.4%,calc(100% - 2.0px) 10.5%,calc(100% - 1.4px) 13.1%,calc(100% - 3.5px) 16.4%,calc(100% - 2.4px) 18.0%,calc(100% - 1.3px) 21.0%,calc(100% - 1.6px) 24.1%,calc(100% - 3.1px) 27.3%,calc(100% - 1.7px) 30.2%,calc(100% - 2.1px) 33.3%,calc(100% - 3.8px) 35.8%,calc(100% - 2.8px) 38.4%,calc(100% - 2.3px) 40.8%,calc(100% - 2.9px) 42.5%,calc(100% - 1.1px) 45.6%,calc(100% - 2.5px) 48.3%,calc(100% - 2.7px) 50.2%,calc(100% - 1.8px) 52.7%,calc(100% - 1.4px) 55.2%,calc(100% - 4.6px) 57.4%,calc(100% - 3.0px) 59.7%,calc(100% - 1.8px) 62.2%,calc(100% - 3.4px) 65.0%,calc(100% - 4.3px) 67.7%,calc(100% - 1.1px) 70.1%,calc(100% - 1.1px) 71.7%,calc(100% - 1.6px) 73.7%,calc(100% - 3.9px) 75.7%,calc(100% - 1.6px) 78.3%,calc(100% - 3.8px) 81.5%,calc(100% - 3.7px) 84.5%,calc(100% - 3.2px) 87.5%,calc(100% - 1.9px) 90.6%,calc(100% - 4.9px) 92.7%,calc(100% - 4.2px) 95.8%,calc(100% - 3.1px) 98.6%,calc(100% - 1.9px) 100%,98.6% calc(100% - 1.1px),95.4% calc(100% - 1.8px),93.2% calc(100% - 2.3px),90.7% calc(100% - 4.9px),88.6% calc(100% - 4.1px),85.8% calc(100% - 2.4px),84.0% calc(100% - 1.9px),82.1% calc(100% - 3.7px),79.7% calc(100% - 4.4px),76.9% calc(100% - 4.7px),74.9% calc(100% - 2.4px),72.7% calc(100% - 4.5px),70.4% calc(100% - 3.7px),67.9% calc(100% - 2.9px),65.0% calc(100% - 4.9px),61.6% calc(100% - 1.9px),58.5% calc(100% - 3.9px),56.6% calc(100% - 1.3px),54.0% calc(100% - 1.7px),50.6% calc(100% - 4.6px),47.5% calc(100% - 1.9px),45.9% calc(100% - 4.0px),42.7% calc(100% - 3.4px),41.1% calc(100% - 4.4px),39.0% calc(100% - 2.5px),36.7% calc(100% - 2.4px),33.7% calc(100% - 2.2px),30.4% calc(100% - 4.5px),28.3% calc(100% - 3.4px),25.1% calc(100% - 4.8px),23.0% calc(100% - 4.5px),19.8% calc(100% - 1.5px),16.5% calc(100% - 3.2px),14.3% calc(100% - 1.4px),12.6% calc(100% - 1.2px),9.9% calc(100% - 1.3px),7.7% calc(100% - 4.5px),5.1% calc(100% - 4.2px),2.8% calc(100% - 4.3px),0.0% calc(100% - 2.4px),2.8px 99.4%,2.3px 97.2%,1.3px 93.9%,4.7px 92.2%,4.9px 90.6%,4.9px 87.8%,1.4px 86.0%,1.9px 83.6%,3.5px 81.5%,4.9px 79.4%,3.2px 76.1%,3.8px 72.8%,3.6px 70.5%,2.0px 67.3%,3.2px 65.5%,2.2px 62.5%,2.0px 60.5%,1.3px 58.6%,2.1px 56.8%,4.9px 54.4%,2.8px 51.1%,3.6px 49.0%,3.6px 47.4%,4.8px 44.2%,2.6px 42.4%,2.2px 40.6%,2.3px 37.8%,2.3px 36.2%,4.4px 33.1%,4.6px 30.1%,2.2px 28.0%,2.3px 25.5%,3.2px 22.3%,3.3px 19.7%,3.4px 16.5%,2.0px 14.4%,1.1px 12.6%,2.0px 10.6%,1.3px 8.0%,3.2px 5.7%,1.3px 2.7%)}
.altrove h3{font:700 1.1rem/1.2 var(--f-macchina);letter-spacing:.22em;margin:0 0 .7em}
.altrove ul{list-style:none;margin:0;padding:0}
.altrove li{padding:10px 0 9px;border-top:1px dashed rgba(20,20,20,.45)}
.altrove li b{display:block;font:700 .8125rem/1.3 var(--f-macchina);text-transform:uppercase;letter-spacing:.08em;color:var(--rosso-fondo)}
.altrove a{font:700 1.05rem/1.45 var(--f-macchina);text-underline-offset:3px;overflow-wrap:anywhere}
.altrove a:hover,.altrove a:focus-visible{color:var(--rosso-fondo)}
.altrove li span{display:block;font-size:.875rem;line-height:1.4}
.spray{display:none}
@media (min-width:900px){
  .canali{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px;align-items:center;justify-content:start;padding-left:calc(var(--g) + 6%)}
  .spray{display:block;margin:0;justify-self:center;font:900 clamp(7rem,13vw,11rem)/.8 var(--f-stencil);letter-spacing:.03em;color:rgba(226,35,26,.9);transform:rotate(-7deg);
    text-shadow:0 0 5px rgba(226,35,26,.55),0 0 22px rgba(226,35,26,.22);-webkit-mask-image:var(--inchiostro);mask-image:var(--inchiostro);-webkit-mask-size:220px;mask-size:220px;user-select:none}
}
/* resti di vecchi manifesti sul muro (solo sul PC) */
@media (min-width:900px){
  #video::before{content:"";position:absolute;z-index:-1;bottom:-70px;left:1%;width:280px;height:86px;background:var(--carta) var(--grana-scura);clip-path:polygon(0.0% 1.5px,1.8% 2.3px,5.0% 3.9px,7.9% 3.8px,10.0% 4.7px,12.5% 2.7px,14.9% 4.3px,17.7% 3.7px,20.7% 2.2px,22.5% 3.4px,24.1% 4.5px,27.2% 4.4px,29.6% 3.0px,32.6% 3.4px,34.2% 1.1px,36.6% 2.0px,39.5% 4.2px,41.5% 2.7px,44.8% 1.7px,48.0% 3.2px,49.7% 3.8px,51.3% 3.7px,53.9% 2.5px,57.2% 2.8px,59.5% 3.0px,61.5% 4.1px,63.8% 3.1px,65.5% 2.6px,67.5% 3.0px,69.9% 1.1px,72.3% 1.2px,74.4% 3.8px,76.4% 4.9px,78.4% 3.4px,80.8% 2.6px,82.9% 1.7px,84.6% 3.0px,87.7% 4.9px,90.3% 4.1px,93.0% 3.2px,95.0% 4.4px,98.3% 1.9px,100% 3.1px,calc(100% - 1.1px) 3.3%,calc(100% - 1.1px) 6.0%,calc(100% - 4.0px) 8.4%,calc(100% - 2.0px) 10.5%,calc(100% - 1.4px) 13.1%,calc(100% - 3.5px) 16.4%,calc(100% - 2.4px) 18.0%,calc(100% - 1.3px) 21.0%,calc(100% - 1.6px) 24.1%,calc(100% - 3.1px) 27.3%,calc(100% - 1.7px) 30.2%,calc(100% - 2.1px) 33.3%,calc(100% - 3.8px) 35.8%,calc(100% - 2.8px) 38.4%,calc(100% - 2.3px) 40.8%,calc(100% - 2.9px) 42.5%,calc(100% - 1.1px) 45.6%,calc(100% - 2.5px) 48.3%,calc(100% - 2.7px) 50.2%,calc(100% - 1.8px) 52.7%,calc(100% - 1.4px) 55.2%,calc(100% - 4.6px) 57.4%,calc(100% - 3.0px) 59.7%,calc(100% - 1.8px) 62.2%,calc(100% - 3.4px) 65.0%,calc(100% - 4.3px) 67.7%,calc(100% - 1.1px) 70.1%,calc(100% - 1.1px) 71.7%,calc(100% - 1.6px) 73.7%,calc(100% - 3.9px) 75.7%,calc(100% - 1.6px) 78.3%,calc(100% - 3.8px) 81.5%,calc(100% - 3.7px) 84.5%,calc(100% - 3.2px) 87.5%,calc(100% - 1.9px) 90.6%,calc(100% - 4.9px) 92.7%,calc(100% - 4.2px) 95.8%,calc(100% - 3.1px) 98.6%,calc(100% - 1.9px) 100%,98.6% calc(100% - 1.1px),95.4% calc(100% - 1.8px),93.2% calc(100% - 2.3px),90.7% calc(100% - 4.9px),88.6% calc(100% - 4.1px),85.8% calc(100% - 2.4px),84.0% calc(100% - 1.9px),82.1% calc(100% - 3.7px),79.7% calc(100% - 4.4px),76.9% calc(100% - 4.7px),74.9% calc(100% - 2.4px),72.7% calc(100% - 4.5px),70.4% calc(100% - 3.7px),67.9% calc(100% - 2.9px),65.0% calc(100% - 4.9px),61.6% calc(100% - 1.9px),58.5% calc(100% - 3.9px),56.6% calc(100% - 1.3px),54.0% calc(100% - 1.7px),50.6% calc(100% - 4.6px),47.5% calc(100% - 1.9px),45.9% calc(100% - 4.0px),42.7% calc(100% - 3.4px),41.1% calc(100% - 4.4px),39.0% calc(100% - 2.5px),36.7% calc(100% - 2.4px),33.7% calc(100% - 2.2px),30.4% calc(100% - 4.5px),28.3% calc(100% - 3.4px),25.1% calc(100% - 4.8px),23.0% calc(100% - 4.5px),19.8% calc(100% - 1.5px),16.5% calc(100% - 3.2px),14.3% calc(100% - 1.4px),12.6% calc(100% - 1.2px),9.9% calc(100% - 1.3px),7.7% calc(100% - 4.5px),5.1% calc(100% - 4.2px),2.8% calc(100% - 4.3px),0.0% calc(100% - 2.4px),2.8px 99.4%,2.3px 97.2%,1.3px 93.9%,4.7px 92.2%,4.9px 90.6%,4.9px 87.8%,1.4px 86.0%,1.9px 83.6%,3.5px 81.5%,4.9px 79.4%,3.2px 76.1%,3.8px 72.8%,3.6px 70.5%,2.0px 67.3%,3.2px 65.5%,2.2px 62.5%,2.0px 60.5%,1.3px 58.6%,2.1px 56.8%,4.9px 54.4%,2.8px 51.1%,3.6px 49.0%,3.6px 47.4%,4.8px 44.2%,2.6px 42.4%,2.2px 40.6%,2.3px 37.8%,2.3px 36.2%,4.4px 33.1%,4.6px 30.1%,2.2px 28.0%,2.3px 25.5%,3.2px 22.3%,3.3px 19.7%,3.4px 16.5%,2.0px 14.4%,1.1px 12.6%,2.0px 10.6%,1.3px 8.0%,3.2px 5.7%,1.3px 2.7%);transform:rotate(-3deg);opacity:.13}
}
.annuncio{position:relative;width:min(100%,560px);transform:rotate(-1deg);filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}
.annuncio-corpo{padding:30px clamp(18px,5vw,34px) 18px}
.annuncio h2{font:900 clamp(2.6rem,12vw,4.4rem)/.86 var(--f-stencil);margin:0 0 .35em}
.annuncio-corpo p{font-size:.98rem}
.strappa{font:400 1.2rem/1 var(--f-pennarello);color:var(--rosso-penna);display:inline-block;transform:rotate(-3deg);margin:.2em 0 0}
.linguette{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start}
.linguette li{flex:1 1 0;min-width:0;background-color:var(--carta);background-image:var(--grana-scura);border-top:2px dashed var(--toner);border-right:2px dashed rgba(20,20,20,.55)}
.linguette li:last-child{border-right:0}
.linguette li.via{background:none;border-top-color:transparent;border-right-color:rgba(20,20,20,.55);height:26px;align-self:flex-start;clip-path:polygon(0.0% 8.5px,2.6% 8.1px,4.8% 5.8px,7.8% 4.1px,10.2% 8.4px,12.4% 6.0px,15.4% 8.2px,19.7% 7.9px,23.7% 5.6px,27.6% 4.9px,30.2% 6.2px,33.5% 5.0px,36.2% 3.1px,38.6% 4.1px,40.9% 7.7px,43.4% 2.3px,47.7% 2.3px,51.8% 6.4px,55.8% 4.0px,59.8% 5.7px,62.3% 5.3px,65.1% 4.4px,68.7% 9.0px,72.5% 3.4px,76.6% 4.9px,80.8% 3.4px,83.0% 6.4px,86.6% 3.9px,90.2% 4.5px,93.5% 7.2px,95.9% 4.2px,99.1% 5.9px,100% 8.3px,100% 2.3%,100% 4.4%,100% 7.0%,100% 10.9%,100% 14.4%,100% 17.0%,100% 19.9%,100% 22.3%,100% 25.4%,100% 27.5%,100% 31.3%,100% 35.5%,100% 39.9%,100% 43.8%,100% 48.2%,100% 50.2%,100% 52.9%,100% 57.3%,100% 61.3%,100% 64.3%,100% 68.7%,100% 72.2%,100% 76.3%,100% 79.0%,100% 81.5%,100% 84.6%,100% 86.9%,100% 89.9%,100% 94.3%,100% 97.1%,100% 99.1%,100% 100%,99.4% 100%,96.8% 100%,94.7% 100%,91.5% 100%,87.4% 100%,83.2% 100%,80.5% 100%,77.5% 100%,75.4% 100%,72.4% 100%,69.8% 100%,66.6% 100%,62.1% 100%,59.1% 100%,55.1% 100%,51.8% 100%,49.5% 100%,45.0% 100%,42.4% 100%,39.2% 100%,37.1% 100%,34.7% 100%,31.0% 100%,28.6% 100%,26.4% 100%,24.3% 100%,21.8% 100%,18.7% 100%,14.3% 100%,12.0% 100%,9.3% 100%,6.4% 100%,2.4% 100%,0.0% 100%,0 96.9%,0 94.2%,0 90.5%,0 86.9%,0 83.6%,0 79.5%,0 75.9%,0 71.9%,0 68.3%,0 65.4%,0 61.1%,0 56.9%,0 52.7%,0 50.2%,0 47.9%,0 44.7%,0 40.8%,0 36.9%,0 33.2%,0 29.0%,0 26.0%,0 21.5%,0 18.1%,0 13.8%,0 11.6%,0 9.3%,0 5.1%,0 2.5%);background:var(--carta) var(--grana-scura)}
.linguette a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;height:clamp(150px,36vw,190px);padding:14px 4px;writing-mode:vertical-rl;transform:rotate(180deg);
  text-decoration:none;color:var(--toner);font:700 clamp(.9rem,3.8vw,1.04rem)/1.2 var(--f-macchina);white-space:nowrap}
.linguette a span{display:block;font-weight:400;font-size:.8125rem}
.linguette a:hover,.linguette a:focus-visible{background:var(--rosso-fondo);color:var(--carta)}
.linguette li:nth-child(2n){transform:translateY(2px) rotate(.6deg)}
.linguette li:nth-child(3n){transform:rotate(-.8deg)}

/* ---------- piede ---------- */
.piede{margin-top:clamp(100px,14vw,170px);padding-bottom:46px}
.piede-nastro{margin:0 -12px;background:rgba(176,175,167,.94) var(--grana-scura);color:var(--toner);transform:rotate(-.7deg);padding:14px 0 12px}
.piede-nastro div{max-width:var(--largo);margin:0 auto;padding:0 calc(var(--g) + 12px);display:flex;flex-wrap:wrap;gap:6px 26px;font:400 .84rem/1.5 var(--f-macchina)}
.piede-nastro a{font-weight:700;color:var(--toner)}

/* ---------- pagine semplici (crediti, 404) ---------- */
.foglio-testo{max-width:900px;margin:40px auto 0;padding:clamp(22px,5vw,48px) clamp(16px,5vw,48px);box-shadow:var(--ombra-carta);transform:rotate(.3deg)}
.foglio-testo h1{font:900 clamp(2.6rem,10vw,4.6rem)/.88 var(--f-stencil);margin:0 0 .4em}
.foglio-testo h2{font:700 1.05rem/1.3 var(--f-macchina);letter-spacing:.18em;text-transform:uppercase;margin:2em 0 .6em;border-bottom:2px solid var(--toner);padding-bottom:4px}
.crediti{list-style:none;margin:0;padding:0}
.crediti li{padding:12px 0;border-bottom:1px dashed rgba(20,20,20,.4);font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
.crediti b{display:block;font-size:1rem}
.strappato{max-width:620px;margin:70px auto 0;padding:0 var(--g)}
.strappato .resto{padding:34px 26px 26px;clip-path:polygon(0.0% 3.9px,2.0% 2.0px,4.6% 2.7px,6.9% 1.6px,9.6% 2.3px,12.3% 1.9px,14.0% 1.7px,15.6% 2.5px,18.7% 2.5px,20.8% 3.7px,22.8% 2.9px,26.2% 3.8px,28.7% 3.5px,31.8% 4.0px,34.2% 2.8px,37.0% 1.1px,38.8% 3.5px,41.6% 3.9px,44.8% 3.7px,47.3% 2.5px,50.2% 3.0px,53.0% 1.2px,54.8% 3.4px,57.7% 2.5px,60.4% 1.5px,62.5% 0.7px,64.2% 3.5px,67.3% 4.0px,69.8% 0.8px,72.7% 3.3px,75.9% 1.9px,78.8% 1.0px,82.0% 1.5px,84.3% 3.2px,87.4% 3.6px,89.8% 0.7px,93.0% 2.7px,96.2% 0.7px,98.0% 3.0px,99.8% 1.7px,100% 3.6px,calc(100% - 2.9px) 3.4%,calc(100% - 1.7px) 5.9%,calc(100% - 3.0px) 9.3%,calc(100% - 3.1px) 11.4%,calc(100% - 0.6px) 13.2%,calc(100% - 0.7px) 15.8%,calc(100% - 2.9px) 17.5%,calc(100% - 3.9px) 19.5%,calc(100% - 1.4px) 21.8%,calc(100% - 2.1px) 24.5%,calc(100% - 2.6px) 26.4%,calc(100% - 1.6px) 28.1%,calc(100% - 1.8px) 31.2%,calc(100% - 1.6px) 33.4%,calc(100% - 1.8px) 36.7%,calc(100% - 2.6px) 39.9%,calc(100% - 1.6px) 42.2%,calc(100% - 1.8px) 44.6%,calc(100% - 3.2px) 47.2%,calc(100% - 0.6px) 49.9%,calc(100% - 2.5px) 52.6%,calc(100% - 3.1px) 55.2%,calc(100% - 1.6px) 57.9%,calc(100% - 1.3px) 61.2%,calc(100% - 3.3px) 63.7%,calc(100% - 1.3px) 66.1%,calc(100% - 1.2px) 69.0%,calc(100% - 2.0px) 71.0%,calc(100% - 2.9px) 73.2%,calc(100% - 0.9px) 76.5%,calc(100% - 1.6px) 79.1%,calc(100% - 1.7px) 81.6%,calc(100% - 3.4px) 83.3%,calc(100% - 2.0px) 85.6%,calc(100% - 3.5px) 88.3%,calc(100% - 1.1px) 89.9%,calc(100% - 1.7px) 92.6%,calc(100% - 2.8px) 95.3%,calc(100% - 3.6px) 97.1%,calc(100% - 2.1px) 99.8%,calc(100% - 1.3px) 100%,97.7% calc(100% - 0.7px),95.6% calc(100% - 3.7px),92.9% calc(100% - 2.9px),91.2% calc(100% - 3.7px),89.2% calc(100% - 3.6px),87.0% calc(100% - 3.6px),84.9% calc(100% - 2.5px),82.3% calc(100% - 0.5px),79.5% calc(100% - 3.1px),76.4% calc(100% - 1.1px),73.5% calc(100% - 1.5px),71.5% calc(100% - 2.8px),68.2% calc(100% - 2.3px),64.9% calc(100% - 1.9px),62.5% calc(100% - 3.8px),59.2% calc(100% - 2.6px),56.0% calc(100% - 1.7px),52.7% calc(100% - 1.4px),51.1% calc(100% - 3.5px),49.2% calc(100% - 2.2px),45.9% calc(100% - 3.2px),43.6% calc(100% - 1.7px),41.2% calc(100% - 1.2px),38.9% calc(100% - 2.4px),36.7% calc(100% - 3.4px),34.6% calc(100% - 1.1px),31.5% calc(100% - 3.3px),29.4% calc(100% - 3.7px),27.6% calc(100% - 3.3px),25.4% calc(100% - 3.4px),22.3% calc(100% - 0.5px),19.6% calc(100% - 2.7px),16.5% calc(100% - 3.5px),14.4% calc(100% - 0.7px),12.5% calc(100% - 1.4px),9.4% calc(100% - 1.4px),6.3% calc(100% - 2.3px),4.4% calc(100% - 2.0px),1.8% calc(100% - 2.2px),0.0% calc(100% - 3.2px),3.8px 98.6%,1.8px 96.3%,3.6px 93.9%,3.3px 92.2%,1.4px 89.3%,2.1px 86.8%,0.9px 84.7%,3.3px 82.3%,2.8px 79.4%,3.6px 77.1%,3.3px 74.2%,2.8px 71.7%,3.1px 69.5%,2.5px 67.1%,0.9px 64.4%,2.6px 61.3%,0.5px 59.0%,1.0px 56.0%,3.2px 53.3%,0.7px 51.1%,0.8px 49.1%,0.8px 47.4%,3.6px 45.1%,1.1px 42.2%,0.6px 39.6%,3.4px 37.8%,0.9px 35.6%,3.5px 33.7%,2.9px 31.4%,3.4px 28.8%,3.8px 26.0%,2.5px 23.8%,3.3px 21.6%,0.6px 19.4%,3.2px 16.9%,2.3px 15.2%,3.0px 12.0%,0.9px 8.7%,3.1px 7.0%,3.8px 5.1%,0.7px 3.3%,1.6px 1.6%);transform:rotate(-2deg)}
.strappato .resto p:first-child{font:900 clamp(5rem,30vw,10rem)/.8 var(--f-stencil);margin:0 0 .15em;color:var(--rosso)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{body::after{display:none}body{background:#fff;color:#000}}

/* ===== PROVA «sito vivo» FASE 1 (?prova=vivo, js/vivo.js; brief di Inoki 24/10). Tutto sotto .vivo: senza la prova non cambia niente ===== */
/* dischi: copertine in 3D con la luce che segue il dito */
.vivo .cop-disco{position:relative;display:block;perspective:650px;-webkit-touch-callout:none}
.vivo .cop-disco img{transform:rotateX(var(--vx,0deg)) rotateY(var(--vy,0deg)) scale(var(--vs,1));box-shadow:calc(var(--vy,0deg) / 1deg * -.6px) calc(10px + var(--vx,0deg) / 1deg * .6px) 18px rgba(0,0,0,.55);will-change:transform}
.vivo .cop-disco::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:1;pointer-events:none;transform:rotateX(var(--vx,0deg)) rotateY(var(--vy,0deg)) scale(var(--vs,1));
  background:radial-gradient(circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.28),transparent 55%);mix-blend-mode:screen}
/* la scheda del disco: busta col vinile dietro */
.vivo .sd-testa .v-busta{position:relative;width:72%;max-width:300px}
@media (min-width:640px){.vivo .sd-testa .v-busta{width:100%}}
.vivo .v-busta img{position:relative;z-index:1;display:block;width:100%;height:auto;cursor:grab;touch-action:pan-y;-webkit-user-drag:none;user-select:none;backface-visibility:hidden}
.vivo .v-vinile{position:absolute;inset:3%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,#0c0c0c 0 3%,transparent 3.2%),radial-gradient(circle,rgba(255,255,255,.08),transparent 70%),repeating-radial-gradient(circle,#121212 0 1.5px,#1f1f1f 1.5px 3px);
  box-shadow:0 10px 22px rgba(0,0,0,.6)}
.vivo .v-vinile::after{content:"";position:absolute;inset:32%;border-radius:50%;background:var(--etichetta) center/cover;box-shadow:0 0 0 2px #0c0c0c}
.vivo .v-vinile.fuori{animation:v-esce .8s .3s cubic-bezier(.2,.8,.2,1) both,v-gira 3.2s 1.1s linear infinite}
@keyframes v-esce{from{translate:0 0}to{translate:36% 0}}
@keyframes v-gira{to{rotate:360deg}}
.vivo .disco-scheda{overflow:hidden}
.vivo .v-anno{display:inline-block;margin:2px 0 6px;font:700 .8rem/1.3 var(--f-macchina);letter-spacing:.05em;text-transform:uppercase;color:var(--rosso-fondo);text-decoration:none;border-bottom:2px solid currentColor}
.vivo #chi .anni>li.v-acceso{animation:v-acceso 1.6s ease-out}
@keyframes v-acceso{0%{background:rgba(226,35,26,.45)}100%{background:transparent}}
/* foto: profondità sotto il dito */
.vivo .album .fotogramma{transform:perspective(700px) rotateX(var(--vx,0deg)) rotateY(var(--vy,0deg)) rotate(var(--rr,-1.2deg)) scale(var(--vs,1));transition:none;will-change:transform;-webkit-touch-callout:none}
.vivo .album .fotogramma:hover{transform:perspective(700px) rotateX(var(--vx,0deg)) rotateY(var(--vy,0deg)) rotate(var(--rr,-1.2deg)) scale(var(--vs,1))}
.vivo .album .fotogramma a{overflow:hidden}
.vivo .album .fotogramma img{will-change:transform}
.vivo dialog.lente img{touch-action:pan-y;user-select:none;-webkit-user-drag:none}
/* titoli: lettere che si muovono */
.vivo .ultime-t .v-l{display:inline-block;will-change:transform}
/* pulsanti: rispondono subito e tornano con l'elastico */
.vivo .q,.vivo .cd-share,.vivo .sd-play,.vivo .b-link a,.vivo a.torna,.vivo a.torna-scheda,.vivo .v-anno,.vivo nav a{transition:scale .35s cubic-bezier(.3,1.8,.5,1)}
.vivo .q:active,.vivo .cd-share:active,.vivo .sd-play:active,.vivo .b-link a:active,.vivo a.torna:active,.vivo a.torna-scheda:active,.vivo .v-anno:active,.vivo nav a:active{scale:.93;transition:scale .06s}
/* passaggio fra le sezioni */
.vivo.stanza main>section.aperta{animation:v-entra .38s cubic-bezier(.2,.8,.2,1)}
.vivo .schede.con-scheda .scheda.attiva{animation:v-entra .38s cubic-bezier(.2,.8,.2,1)}
@keyframes v-entra{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
/* la faccia diventa una biglia e porta nel 3D (prova vivo) */
.js .manifesto{cursor:pointer}
.manifesto.biglia{overflow:hidden;border-radius:50%;transform:scale(.3) rotate(720deg);opacity:.2;
  transition:border-radius .45s ease,transform .9s cubic-bezier(.6,0,.3,1),opacity .9s ease-in;box-shadow:0 0 60px rgba(226,35,26,.8)}
.manifesto.biglia .nastro,.manifesto.biglia~*{opacity:0;transition:opacity .2s}
/* invito al NESS CLUB, per tutti (js/vivo.js): un pezzo di nastro che arriva dal basso, una volta per visita */
.invito-club{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:70;max-width:420px;margin:0 auto;display:block;text-decoration:none;
  background:var(--rosso);color:var(--carta);padding:14px 46px 12px 16px;box-shadow:0 18px 30px rgba(0,0,0,.6);transform:rotate(-1.5deg);animation:ic-entra .5s cubic-bezier(.2,1.3,.4,1) both}
.invito-club .ic-1,.invito-club .ic-2{display:block;font:700 .75rem/1.3 var(--f-macchina);text-transform:uppercase;letter-spacing:.06em}
.invito-club b{display:block;font:900 2rem/1 var(--f-stencil);margin:2px 0 4px}
.invito-club .ic-via{position:absolute;right:6px;top:6px;width:34px;height:34px;border:0;background:rgba(0,0,0,.25);color:var(--carta);font:700 20px/1 var(--f-macchina);cursor:pointer}
.invito-club.via{transition:transform .35s ease-in,opacity .35s;transform:translateY(140%) rotate(-1.5deg);opacity:0}
@keyframes ic-entra{from{transform:translateY(140%) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.invito-club{animation:none}}
/* NESS CLUB davanti a tutto in pagina iniziale (Inoki 24/10: «deve essere quasi una roba principale») */
.q.q-club{background:#0e0e0e;color:var(--carta)}
.q.q-club img{filter:none;aspect-ratio:900/568;border-radius:4.5%/7%}
.q.q-club .q-sub{color:var(--rosso)}
.q.q-club .q-et{font-size:2.4rem}
/* il club in primo piano, da solo sulla sua riga, ma raccolto: tessera al centro, non enorme (Inoki 24/10) */
.q-club-li .q.q-club{align-items:center;text-align:center;padding:18px 16px 16px}
.q-club-li .q.q-club img{width:min(72%,340px);margin:0 auto}
.q-club-li .q.q-club .q-et{font-size:2rem}
/* 25/10 (Inoki: «clicco su 1996 nel 3D e mi deve andare sul 1996 del 2D»): ogni anno ha il suo id; quello raggiunto si accende */
.anni li{scroll-margin-top:24px}
.anni li:target{outline:3px solid var(--rosso);outline-offset:4px}