/* B73 / F-40: muro di tessere (anteprima locale). Si appoggia ai token di style.css; nessuna regola globale. */
.muro-page{--tl:.87;--tc:.09;--tink:oklch(.24 .05 var(--th,60))}
@media (prefers-color-scheme:dark){.muro-page{--tl:.36;--tink:oklch(.95 .02 var(--th,60))}}
:root[data-theme=dark] .muro-page{--tl:.36;--tink:oklch(.95 .02 var(--th,60))}


.wall-count{font:800 clamp(18px,2.4vw,24px)/1.2 var(--body);margin:0 0 14px}
.wall-scarce{font:600 15px/1.45 var(--body);color:var(--ink-soft);margin:14px 0 0;max-width:62ch}
.wall{max-width:860px;margin:0 auto}
.tile{position:relative;border-radius:14px;background:oklch(var(--tl) var(--tc) var(--th,60));color:var(--tink);overflow:hidden;min-width:0}
.tile a{color:inherit}
.face-free,.face-sold{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2px;height:100%;width:100%;padding:8px 6px;text-decoration:none}
.face-sold{display:none}
.tile.sold .face-free{display:none}.tile.sold .face-sold{display:flex}
.tile.sold{background:oklch(calc(var(--tl) - .08) .13 var(--th,60))}
.tile.pro.sold{background:var(--mood)}
.face-free:hover .cta,.face-free:focus-visible .cta{text-decoration:underline}
.tile:has(.face-free:hover){transform:translateY(-3px)}
.tile{transition:transform .25s var(--ease)}
.no{font:600 12px/1 var(--mono);opacity:.7}
.pr{font:900 clamp(22px,3.4vw,38px)/1 var(--display);font-stretch:70%}
.st{font:700 12px/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.cta{font:800 14px/1 var(--body);margin-top:8px}
.badge{font:900 13px/1 var(--display);letter-spacing:.14em;background:var(--on-mood);color:var(--mood);padding:5px 10px;border-radius:999px;margin-bottom:6px}
.tile.pro{background:var(--mood);color:var(--on-mood)}
.tile.pro .pr{font-size:clamp(34px,6vw,64px)}
.em{font-size:clamp(26px,5vw,48px);line-height:1.1}.tile.pro .em{font-size:clamp(34px,7vw,72px)}
.nm{font:800 clamp(12px,1.7vw,17px)/1.15 var(--body);overflow-wrap:anywhere}
.lk{font:700 11px/1.2 var(--body);text-decoration:underline;overflow-wrap:anywhere}
.sp{font:700 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:3px 7px;margin-top:4px}

/* A: tessera centrale grande, otto uguali intorno */
.v-a .grid9{--cell:clamp(92px,18vw,170px);display:grid;grid-template-columns:1fr 1.5fr 1fr;grid-template-rows:var(--cell) calc(var(--cell)*1.5) var(--cell);gap:10px;padding:12px;border:3px solid var(--ink);border-radius:24px;background:var(--paper-2)}
.v-a .tile.pro{border:3px solid var(--on-mood);box-shadow:0 0 0 3px var(--mood)}

.wall-what h3{margin:0 0 6px;font-size:20px}
.what2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.what2>div{background:var(--paper-2);border-radius:14px;padding:16px 20px}
.what2 .what-pro{background:var(--mood);color:var(--on-mood)}
.wall-what ul,.wall-rules ul{margin:6px 0 0;padding-left:20px}.wall-what li,.wall-rules li{margin:5px 0;font-size:17px;line-height:1.45}

@media(max-width:760px){
  .what2{grid-template-columns:1fr}
  .v-a .grid9{--cell:clamp(104px,30vw,124px);gap:6px;padding:8px}
  .face-free,.face-sold{padding:6px 3px}.no,.cta,.st{display:none}.tile.pro .st,.tile.pro .cta{display:block}.tile.pro .cta{font-size:12px;margin-top:4px}.tile.pro .st{font-size:10px}
  .pr{font-size:clamp(20px,6.4vw,28px)}.tile.pro .pr{font-size:clamp(28px,9vw,40px)}.nm{font-size:11px}.lk{font-size:9px}.sp{font-size:8px;padding:2px 4px}.em{font-size:20px}.face-sold{gap:1px}.nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.face-sold .lk{font-size:0}.face-sold .lk::after{content:"link ↗";font-size:9px}.tile.pro .face-sold .lk::after{font-size:11px}
}

/* Home: sezione del muro subito sotto il nastro dei numeri */
.home-wall{padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px);background:var(--paper-2);border-bottom:1px solid var(--rule)}
.home-wall>.wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center}
.home-wall h2{font:900 clamp(40px,5.4vw,76px)/.92 var(--display);font-stretch:68%;margin:6px 0 14px;text-wrap:balance}
.home-wall .intro{font-size:clamp(17px,1.6vw,20px);margin:0 0 16px;max-width:46ch}
.home-wall .wall-count{margin:0 0 16px}
.home-wall .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px}
.home-wall .btn.big{font-size:18px;padding:16px 26px}
.home-wall .hw-grid{margin:0;max-width:none}
.home-wall .tile{box-shadow:0 2px 0 oklch(0 0 0/.12)}
.btn.quiet{border-color:transparent;text-decoration:underline;text-underline-offset:4px;background:none}
@media(max-width:860px){.home-wall>.wrap{grid-template-columns:1fr}}


.timg{height:75%;width:auto;max-width:94%;min-height:0;object-fit:contain;flex:0 1 auto}
.tile.pro .timg{height:72%}
@media(max-width:760px){.timg{height:66%}}

/* Home: hero compatto, il muro entra nel fold; conto alla rovescia e saldo sotto Spinotto */
.hv3 .d-hero{padding-top:84px}.hv3 .d-hero h1{font-size:clamp(34px,4.4vw,64px)}.hv3 .d-hero .lede{margin-top:14px;font-size:17px}.hv3 .d-hero .hero-m{width:clamp(110px,12vw,160px)}
.hv3 .d-hero .tape{display:none}
.hv3 .buddy{flex-wrap:wrap}
.mini-tape{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--on-mood);overflow:hidden;margin-top:4px}
.mini-tape>div{padding:12px 16px;display:flex;flex-direction:column;gap:4px}.mini-tape>div+div{border-left:1px solid var(--rule)}
.mini-tape .lbl{font:700 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.mini-tape b{font:800 24px/1 var(--display);font-stretch:80%}.mini-tape small{font:500 11px/1.2 var(--body);opacity:.75}
.hv3 .home-wall{padding-top:30px}.hv3 .home-wall h2{font-size:clamp(32px,4vw,56px)}
@media(max-width:860px){
  .hv3 .d-hero .lede,.hv3 .d-hero .buddy>.bubble,.hv3 .d-hero .switchrow,.hv3 .d-hero .status{display:none}
  .hv3 .buddy{flex-wrap:nowrap;align-items:center}.hv3 .d-hero .hero-m{width:92px}.mini-tape{flex:1 1 0;min-width:0;margin-top:2px}.mini-tape>div{padding:10px 12px}.mini-tape b{font-size:20px}
  .hv3 .d-hero{padding-bottom:20px}
}