/* NEO — dev v5 · bianco ottico. Le placche sono oggetti scuri su parete chiara. */
@font-face{font-family:'Neo-Display';src:url('Neo-Display.woff2') format('woff2'),url('Neo-Display.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap}

:root{
  --ground:#F1F2F3; --panel:#FFFFFF; --sunk:#E7E9EA;
  --ink:#0A0D0F; --mid:#454F54; --soft:#5F686D;   /* 5.08:1 su --ground, 4.68:1 su --sunk */
  --rule:#D7DBDD; --edge:#BFC5C8;
  --dark:#0C1113;                     /* la materia delle placche */
  --display:'Neo-Display','IBM Plex Mono',monospace;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --pad:clamp(20px,4vw,44px);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --neo-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.3 102.04' width='22' height='43'%3E%3Cpolygon fill='%230a0d0f' points='29.47 26.89 52.3 25.56 29.47 24.22 34.82 17.04 26.88 23.05 27.91 20.38 26.15 0 24.4 20.38 25.42 23.05 17.48 17.04 22.83 24.22 0 25.56 22.83 26.89 17.48 34.07 25.33 28.24 24.45 31.41 26.15 102.04 27.85 31.41 26.98 28.24 34.82 34.07 29.47 26.89'/%3E%3C/svg%3E") 11 11;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;padding-bottom:64px}
@media(pointer:fine){
  html,body,a,button,span,div,li,p{cursor:var(--neo-cursor),auto}
  a,button,.cta,.row,summary{cursor:var(--neo-cursor),pointer}
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img,video{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--panel)}

/* tipografia */
.display{font-family:var(--display);font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:.98}
h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,5.4vw,52px);letter-spacing:.05em;
  margin:12px 0 0;text-transform:uppercase;line-height:1}
h2{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.4em;color:var(--ink);margin:0;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.44em;color:var(--soft);text-transform:uppercase;display:block}
.mono{font-family:var(--mono)}
.small{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--soft);text-transform:uppercase}
.lede{font-size:15px;color:var(--mid);max-width:54ch;line-height:1.7}
p{max-width:66ch}

/* nav */
.nav{position:sticky;top:0;z-index:40;padding:0 var(--pad);
  background:rgba(241,242,243,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule)}
.nav ul{display:flex;gap:clamp(12px,2.1vw,30px);list-style:none;margin:0;padding:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--soft);overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav a:hover{color:var(--ink)}
.nav .on{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{height:22px;width:auto;fill:var(--ink)}
.submit{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--panel);background:var(--ink);
  padding:13px 18px;white-space:nowrap}
.submit:hover{background:#000}

/* struttura */
.wrap{padding:0 var(--pad);max-width:1560px;margin:0 auto}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--soft);padding:22px 0 0;text-transform:uppercase}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
  border-bottom:1px solid var(--ink);padding:52px 0 18px}
.filters{display:flex;gap:clamp(12px,2vw,26px);font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;color:var(--soft);flex-wrap:wrap;text-transform:uppercase}
.filters .on{color:var(--ink)}
.section{padding-top:38px;border-top:1px solid var(--rule);margin-top:44px}
.two{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);padding-top:30px}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.grid{display:grid;gap:clamp(22px,3vw,44px);padding:46px 0 0}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g9{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}

/* placca: oggetto scuro su parete chiara */
.plate{aspect-ratio:1/1;position:relative;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(158deg,#252D31 0%,#131A1D 46%,#0A0E10 100%);
  box-shadow:0 18px 40px -22px rgba(10,13,15,.55),0 1px 2px rgba(10,13,15,.14)}
.plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(148deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 44%)}
.plate .lbl,.plate .cat{position:absolute;bottom:16px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.26em;color:#8A9499;z-index:1}
.plate .lbl{left:18px}.plate .cat{right:18px}
.star{width:22%;fill:#39434A;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.cover{aspect-ratio:1/1;object-fit:cover;box-shadow:0 18px 40px -22px rgba(10,13,15,.55),0 1px 2px rgba(10,13,15,.14)}

.meta{display:flex;flex-direction:column;gap:7px;padding-top:20px}
.cat-no{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--ink)}
.artist{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--ink)}
.title{font-family:var(--display);font-size:24px;letter-spacing:.03em;text-transform:uppercase;color:var(--mid)}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;border:1px solid currentColor;
  padding:2px 8px;display:inline-block;text-transform:uppercase}

/* dati */
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);border-top:1px solid var(--ink);margin-top:26px}
.facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--soft);
  padding:12px 26px 12px 0;border-bottom:1px solid var(--rule);margin:0;text-transform:uppercase}
.facts dd{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink);
  padding:12px 0;border-bottom:1px solid var(--rule);margin:0}
.facts .dim{color:var(--soft)}

/* azioni */
.cta{font-family:var(--mono);font-size:10px;letter-spacing:.24em;padding:15px 30px;display:inline-block;
  background:var(--ink);color:var(--panel);text-transform:uppercase;border:1px solid var(--ink)}
.cta:hover{background:#000}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.cta.ghost:hover{border-color:var(--ink)}
.dsp{display:flex;gap:1px;background:var(--edge);margin-top:28px;flex-wrap:wrap}
.dsp a{font-family:var(--mono);font-size:10px;letter-spacing:.24em;padding:15px 22px;background:var(--panel);color:var(--mid)}
.dsp a:hover{color:var(--ink)}
.dsp a.on{background:var(--ink);color:var(--panel)}

/* ancora */
.anchor{border:1px solid var(--rule);border-left:2px solid var(--ink);background:var(--panel);
  padding:24px 26px 26px;margin-top:32px}
.quote{font-family:var(--sans);font-style:italic;font-size:13px;color:var(--soft);display:block;margin-top:18px}

/* player: reale */
.player{position:fixed;left:0;right:0;bottom:0;height:64px;z-index:50;background:var(--ink);color:#E8EAEB;
  display:flex;align-items:center;gap:clamp(12px,2vw,22px);padding:0 var(--pad)}
.player button{background:none;border:0;padding:0;color:inherit;display:grid;place-items:center;
  width:34px;height:34px;border:1px solid #586369;flex:none;position:relative}
.player button:hover{border-color:#7D878C}
.player .tri{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.player .pause{width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.player .now{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .track{flex:1;height:3px;background:#2A3236;position:relative;min-width:60px}
.player .fill{position:absolute;left:0;top:0;bottom:0;background:#E8EAEB;width:0}
.player .pin{position:absolute;top:-5px;width:2px;height:13px;background:#8FB0BB}
.player .t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#9AA4A9;
  font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:640px){.player .now{display:none}}

/* timeline sulla pagina traccia */
.tl{position:relative;margin-top:34px;min-height:196px}
.tl .mark{position:absolute;top:0;width:min(300px,44vw);transform:translateX(-50%);display:grid;gap:7px}
.tl .stem{position:absolute;top:100px;width:1px;height:46px;background:var(--edge)}
.tl .bar{position:absolute;left:0;right:0;top:146px;height:3px;background:var(--edge)}
.tl .played{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0}
.tl .pin{position:absolute;top:-6px;width:2px;height:15px;background:var(--ink)}
.tl .ticks{position:absolute;left:0;right:0;top:156px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--soft)}

/* scene */
.scene .sh{aspect-ratio:16/9;position:relative;background:var(--sunk);border:1px solid var(--rule)}
.scene.drop .sh{background:var(--ink);border-color:var(--ink)}
.scene .n{position:absolute;left:8px;top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--soft)}
.scene.drop .n{color:var(--panel)}
.scene .u{height:2px;background:var(--rule);margin-top:8px;display:block}
.scene.drop .u{background:var(--ink)}
.scene p{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--soft);margin:9px 0 0;line-height:1.5;max-width:none}
.scene.drop p{color:var(--ink)}

/* registro segnali */
.ledger{margin-top:44px}
.row{display:grid;grid-template-columns:74px 190px minmax(0,1fr) 210px 100px;gap:22px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule)}
.row.hd{padding-bottom:12px;border-bottom:1px solid var(--ink);font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;color:var(--soft);text-transform:uppercase}
a.row:hover{background:var(--panel)}
.row .num{font-family:var(--mono);font-size:19px;font-weight:400;letter-spacing:.08em;color:var(--ink);font-variant-numeric:tabular-nums}
.row.sub .num,.row.sub .tracks{color:var(--edge)}
.row .name{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--ink)}
.row .of{font-size:14px;color:var(--mid)}
.row .where{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mid)}
.row .tracks{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.blk{height:11px;background:var(--edge);display:block}
.blk.d{background:var(--rule)}
@media(max-width:860px){
  .row{grid-template-columns:60px 1fr;gap:8px 16px}
  .row .of,.row .where,.row .tracks{grid-column:2;text-align:left}
  .row.hd{display:none}
}
.link{background:var(--panel);border:1px solid var(--rule);padding:16px 18px;display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;gap:18px;align-items:center;margin-bottom:10px}
a.link:hover{border-color:var(--ink)}
.link .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--soft)}
.link .t{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink)}
.link .m{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--soft)}

/* reader manga */
.reader{display:grid;grid-template-columns:250px minmax(0,1fr) 280px;gap:0;margin-top:22px}
.reader aside{padding:26px 24px 26px 0;border-right:1px solid var(--rule)}
.reader aside+div+aside{border-right:0;border-left:1px solid var(--rule);padding:26px 0 26px 26px}
.pageimg{width:min(560px,100%);border:1px solid var(--rule);background:var(--panel)}
/* Su schermo stretto la tavola viene PRIMA: nella versione a colonne
   singole toccava scorrere nove righe di indice per vedere un disegno.
   In un lettore, l'immagine e' il contenuto. */
@media(max-width:1040px){
  .reader{display:flex;flex-direction:column;gap:0}
  .reader > div{order:-1;padding:0!important}
  .reader aside{border:0!important;padding:26px 0!important;border-top:1px solid var(--rule)!important}
}

footer{border-top:1px solid var(--ink);margin-top:80px;padding:20px var(--pad) 34px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--soft);text-transform:uppercase}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  *:active{transform:none!important}
}

/* Neo-Display non ha cifre: i numeri restano in mono */
.num-mono{font-family:var(--mono)!important;font-weight:400;letter-spacing:.06em;font-variant-numeric:tabular-nums}


/* ─── strato di movimento ───────────────────────────────────────────
   Curve forti, tutto sotto 300ms, feedback sulla pressione non sul
   rilascio. Nessun ease-in: parte lento proprio quando si guarda. */

/* pressione: risponde al pointer-down */
.cta,.submit,.dsp a,.dsp button,.player button,a.row,a.link,.nav a,.scene,.tl .mark{
  transition:transform 160ms var(--ease-out),background-color 150ms ease,
             color 150ms ease,border-color 150ms ease,box-shadow 200ms var(--ease-out)}
.cta:active,.submit:active,.dsp a:active,.dsp button:active,.player button:active{transform:scale(.97)}
a.row:active,a.link:active{transform:scale(.995)}

/* card release e flyer: sollevamento appena percettibile */
.grid > a,.grid > div{transition:transform 220ms var(--ease-out)}
.grid > a:hover{transform:translateY(-3px)}
.grid > a:hover .plate,.grid > a:hover .cover{
  box-shadow:0 26px 52px -22px rgba(10,13,15,.62),0 2px 4px rgba(10,13,15,.16)}
.plate,.cover{transition:box-shadow 220ms var(--ease-out)}
.grid > a:active{transform:translateY(-1px) scale(.995)}

/* scene e marcatori della timeline: sono cliccabili, si deve vedere */
.scene:hover .sh{border-color:var(--ink)}
.scene:active{transform:scale(.98)}
.tl .mark:hover{transform:translateX(-50%) translateY(-2px)}
.tl .mark:active{transform:translateX(-50%) scale(.99)}

/* tavola del manga: dissolvenza, non scatto */
.pageimg{transition:opacity 200ms var(--ease-out)}
.pageimg.fading{opacity:0}

/* barra del player: la progressione e' continua, mai animata
   (una transizione la farebbe arrancare dietro all'audio) */
.player .fill{transition:none}
.player .track:hover .fill{background:#fff}

/* ─── passata ui-ux-pro-max ────────────────────────────────────────
   1 accessibilità · 2 bersagli e interazione · 3 performance · 5 layout.
   Nessun cambio di aspetto: tutto è area cliccabile, focus e semantica. */

/* skip link: primo elemento tabulabile di ogni pagina */
.skip{position:absolute;left:var(--pad);top:-60px;z-index:100;background:var(--ink);color:var(--panel);
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  padding:14px 20px;transition:top 160ms var(--ease-out)}
.skip:focus{top:10px}

/* bersagli: il testo resta di 10px, l'area diventa toccabile.
   Il riempimento è verticale e centrato, quindi la riga non si sposta. */
.nav ul{align-items:stretch}
.nav li{display:flex}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 2px;white-space:nowrap}
.nav .on{border-bottom:0;box-shadow:inset 0 -1px 0 var(--ink);padding-bottom:0}
.submit{display:inline-flex;align-items:center;min-height:44px}
.filters{align-items:center}
.filters a,.filters button{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  background:none;border:0;font:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit}
footer a{display:inline-flex;align-items:center;min-height:44px}
.dsp a,.dsp button{display:inline-flex;align-items:center;min-height:44px}
.cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
a,button,summary,[role="button"],.track{touch-action:manipulation}

/* controlli del player: 34px a vista, 44px al dito */
.player button::before{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
/* la barra è alta 3px ma si prende 40px di altezza cliccabile */
.player .track::before{content:"";position:absolute;left:0;right:0;top:-19px;bottom:-19px}

/* focus visibile ovunque, non solo su a/button */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.player :focus-visible{outline-color:#E8EAEB}
.scene:focus-visible,.tl .mark:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* i marcatori e le scene sono comandi: mano e stato di pressione */
.scene[data-seek],.tl .mark[data-seek]{cursor:var(--neo-cursor),pointer}
button.row{cursor:var(--neo-cursor),pointer}
button.row:hover .mono{color:var(--ink)}

/* registro segnali: i numeri non affiorati restano leggibili.
   Lo stato «ancora sotto» lo dicono le barre oscurate, non il colore. */
.row.sub .num,.row.sub .tracks{color:var(--soft)}

/* form submit */
.form{margin-top:24px}
.filedrop{border:1px dashed var(--edge);background:var(--panel);padding:34px 26px;
  display:grid;justify-items:center;gap:10px;text-align:center}
.filedrop input[type=file]{font-family:var(--mono);font-size:11px;max-width:100%}
.filedrop input[type=file]::file-selector-button{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:11px 16px;min-height:44px;border:1px solid var(--ink);
  background:var(--ink);color:var(--panel);margin-right:12px;cursor:var(--neo-cursor),pointer}
.fields{border-top:1px solid var(--ink);margin-top:26px}
.fld{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:4px 26px;align-items:center;
  border-bottom:1px solid var(--rule);padding:8px 0;margin:0;max-width:none}
.fld label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--soft);text-transform:uppercase}
.fld input{grid-column:2;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);
  background:none;border:0;padding:11px 0;min-height:44px;width:100%}
.fld input::placeholder{color:var(--edge)}
.fld input:focus{outline:0;box-shadow:inset 0 -1px 0 var(--ink)}
.fld input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fld .small{grid-column:2;padding-bottom:8px}
@media(max-width:520px){.fld{grid-template-columns:1fr}.fld input,.fld .small{grid-column:1}}

/* performance: lo spazio delle tavole è riservato prima del caricamento */
.pageimg{aspect-ratio:7/10;object-fit:contain}

/* ═══ passata di ordine e leggibilita' ═══════════════════════════════
   Tre problemi, tre rimedi:
   1. tutto aveva lo stesso peso — mono maiuscolo spaziato ovunque.
      Ora il mono ha un solo mestiere: identificare e numerare.
   2. venti misure di corpo diverse. Ora una scala di sei.
   3. le superfici erano riquadri piatti. Ora hanno rilievo, che e'
      il modo in cui il canone dice di leggere la gerarchia.          */

:root{
  --t0:11px;  --t1:13px;  --t2:15px;  --t3:18px;  --t4:24px;  --t5:34px;
  --track:.18em;          /* etichette */
  --track-wide:.34em;     /* solo occhielli e titoletti di sezione */
  --s1:10px; --s2:18px; --s3:30px; --s4:52px; --s5:84px;
  --lift:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(10,13,15,.05);
}

/* — tipografia: una scala sola — */
body{font-size:var(--t2);line-height:1.65}
p,.lede{max-width:62ch}
.lede{font-size:var(--t2);line-height:1.7;color:var(--mid)}
.eyebrow{font-size:var(--t0);letter-spacing:var(--track-wide)}
h2{font-size:var(--t0);letter-spacing:var(--track-wide)}
.small{font-size:var(--t0);letter-spacing:var(--track)}
.crumb{font-size:var(--t0);letter-spacing:var(--track)}
.filters{font-size:var(--t0);letter-spacing:var(--track)}
.cat-no{font-size:var(--t0);letter-spacing:var(--track)}
.artist{font-size:var(--t1);letter-spacing:var(--track)}
.title{font-size:var(--t4)}
.tag{font-size:var(--t0);letter-spacing:.14em;padding:3px 9px}
.facts dt{font-size:var(--t0);letter-spacing:var(--track)}
.facts dd{font-size:var(--t1);letter-spacing:.03em}
.cta,.submit,.dsp a,.dsp button{font-size:var(--t0);letter-spacing:var(--track)}
.nav ul{font-size:var(--t0);letter-spacing:var(--track)}
footer{font-size:var(--t0);letter-spacing:var(--track)}
.row .name{font-size:var(--t1);letter-spacing:var(--track)}
.row .of{font-size:var(--t2)}
.row .where,.row .tracks{font-size:var(--t0)}
.link .k,.link .m{font-size:var(--t0);letter-spacing:var(--track)}
.link .t{font-size:var(--t1);letter-spacing:.12em}
.player .now,.player .t{font-size:var(--t0);letter-spacing:.14em}
/* le didascalie delle scene tornano leggibili: erano 9,5px spaziati */
.scene p{font-family:var(--sans);font-size:var(--t0);letter-spacing:0;
  text-transform:none;line-height:1.45;color:var(--mid)}
.scene .n{font-size:var(--t0);letter-spacing:.12em}

/* — ritmo: piu' aria tra le sezioni, meno dentro i blocchi — */
.head{padding:var(--s4) 0 var(--s2)}
.section{padding-top:var(--s3);margin-top:var(--s5)}
.grid{padding-top:var(--s3)}
.two{padding-top:var(--s3)}
.meta{gap:6px;padding-top:var(--s2)}

/* — superfici con rilievo, non riquadri — */
.anchor,.link,.filedrop{box-shadow:var(--lift)}
.anchor{border-left-width:2px}
a.link:hover{box-shadow:var(--lift),0 6px 16px -10px rgba(10,13,15,.35)}

/* — ritratti roster — */
.face{position:relative;overflow:hidden;background:var(--sunk);box-shadow:var(--lift)}
.face img{display:block}

/* — locandine: una sola proporzione, 3:4, vere o placca — */
.flyer{aspect-ratio:3/4;width:100%;object-fit:cover;display:block;
  box-shadow:0 18px 40px -22px rgba(10,13,15,.5),0 1px 2px rgba(10,13,15,.12)}
.plateflyer{display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden}

/* — archivio show — */
.past{display:grid;gap:12px}
.past img{aspect-ratio:3/4;object-fit:cover;width:100%;filter:saturate(.15) contrast(1.04);
  box-shadow:0 10px 24px -16px rgba(10,13,15,.45)}
.past:hover img{filter:saturate(.6) contrast(1.04)}
.past img{transition:filter 220ms var(--ease-out)}
.pastmeta{display:grid;gap:4px}
.pastmeta .display{font-size:var(--t1);letter-spacing:.06em}

/* — videoclip — */
.clip{width:100%;aspect-ratio:1280/548;background:var(--dark);display:block;
  margin-top:var(--s2);box-shadow:0 22px 48px -26px rgba(10,13,15,.55)}

/* — navigazione senza ricarica: dissolvenza corta, mai sotto i piedi — */
::view-transition-old(root),::view-transition-new(root){animation-duration:180ms}
body.loading{cursor:progress}
main:focus{outline:none}

/* ═══ correzioni viste a schermo ═════════════════════════════════════
   1. l'attributo height="" nell'HTML vince su aspect-ratio se l'altra
      dimensione non e' auto: le locandine venivano fuori alte 1440px
      e sfondavano la griglia. Questa riga sola rimette a posto LIVE,
      roster, archivio, tavole e videoclip.                           */
img[width][height],video[width][height]{height:auto}
.flyer,.past img,.face img,.pageimg,.clip{height:auto}

/* 2. la riga dei DSP lasciava un blocco grigio orfano a destra */
.dsp{width:fit-content;max-width:100%}

/* 3. auto-fill invece di auto-fit: con due sole locandine in archivio
      le celle non si allargano a mezzo schermo */
.g4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* 4. la stella del marchio in barra era un graffio: piu' corpo */
.brand svg{height:26px}
.nav{gap:clamp(16px,3vw,40px)}

/* 5. il piede non deve toccare il player */
footer{margin-bottom:var(--s2)}

/* ═══ timeline della traccia, rifatta ════════════════════════════════
   Prima era un blocco a posizioni assolute con offset a pixel fissi:
   i marcatori finivano sopra al titolo e la barra sotto ai testi.
   Ora la barra e i tick stanno nel flusso e i marcatori pendono
   sotto, agganciati da un gambo. Se cambia il testo, non si rompe.  */
.tl{position:relative;margin-top:var(--s3);min-height:0}
.tl .bar{position:relative;height:3px;background:var(--edge);top:auto;left:auto;right:auto}
.tl .played{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0}
.tl .pin{position:absolute;top:-6px;width:2px;height:15px;background:var(--ink)}
.tl .ticks{position:relative;top:auto;left:auto;right:auto;display:flex;
  justify-content:space-between;margin-top:10px;
  font-family:var(--mono);font-size:var(--t0);letter-spacing:.1em;color:var(--soft);
  font-variant-numeric:tabular-nums}
.tl .marks{position:relative;min-height:132px;margin-top:26px}
.tl .mark{position:absolute;top:0;width:min(300px,32vw);transform:translateX(-50%);
  display:grid;gap:7px;text-align:left;background:none;border:0;padding:0;
  font:inherit;color:inherit}
.tl .mark::before{content:"";position:absolute;left:50%;top:-26px;width:1px;height:26px;background:var(--edge)}
.tl .mark:hover::before{background:var(--ink)}
.tl .mk{font-size:var(--t0);letter-spacing:.12em;color:var(--ink)}
.tl .mkd{font-size:var(--t0);color:var(--mid);line-height:1.5}
@media(max-width:760px){
  .tl .marks{min-height:0;display:grid;gap:26px}
  .tl .mark{position:static;transform:none;width:auto}
  .tl .mark::before{display:none}
}

/* ═══ ultimi difetti visti a schermo ════════════════════════════════
   1. il reader mostrava tutte e 13 le tavole insieme: la regola
      img{display:block} batteva l'attributo hidden del browser.     */
[hidden]{display:none!important}

/* 2. i campi del form erano invisibili da vuoti: nessun bordo,
      nessun fondo. Ora la riga si vede anche senza testo dentro. */
.fld input{box-shadow:inset 0 -1px 0 var(--rule)}
.fld input:hover{box-shadow:inset 0 -1px 0 var(--edge)}
.fld input:focus{box-shadow:inset 0 -2px 0 var(--ink)}
.fld{border-bottom:0;padding:4px 0 10px}
.fields{display:grid;gap:6px}

/* 3. il selettore di file nativo era tagliato e brutto */
.filedrop{padding:30px 26px}
.filedrop input[type=file]{color:transparent;width:auto}
.filedrop input[type=file]::file-selector-button{margin-right:0}

/* pagine corte: il piede va in fondo, non a meta' schermo */
body{display:flex;flex-direction:column;min-height:100dvh}
main{flex:1 0 auto}
footer{flex:none;margin-top:var(--s5)}

/* ═══ ultimo giro di contrasto e bersagli ════════════════════════════ */
/* i numeri di scena e i segnaposto stanno su --sunk, piu' scuro del fondo */
.scene .n,.plate .lbl,.plate .cat{color:var(--mid)}
.scene.drop .n{color:var(--panel)}

/* l'anno sui ritratti era bianco in differenza sopra una foto: illeggibile.
   Ora ha la sua pastiglia scura. */
.face .small{background:rgba(10,13,15,.72);color:#EDEFF0!important;mix-blend-mode:normal!important;
  padding:5px 9px;letter-spacing:.16em}

/* etichette sulla placca del Segnale */
.plate .lbl,.plate .cat{color:#A2ACB1}

/* il marchio in barra deve essere un bersaglio, non un filo */
.brand{min-width:44px;min-height:44px;justify-content:flex-start}

/* i link dentro le liste dati sono comandi, non testo scorrevole */
.facts dd a,.link a{display:inline-flex;align-items:center;min-height:24px;padding:0 2px}



/* la striscia di navigazione deve poter scorrere, non spingere la pagina:
   in un contenitore flex un figlio non scende sotto la sua larghezza
   naturale finche' non gli si dice min-width:0 */
.nav ul{min-width:0;flex:1 1 auto}

/* le due varianti di colonna erano stili in linea: vincevano sulla
   media query e su mobile la pagina restava a due colonne, sfondando */
.two-a{grid-template-columns:minmax(0,540px) minmax(0,1fr)}
.two-b{grid-template-columns:minmax(0,1fr) minmax(0,420px);padding-top:0}
@media(max-width:900px){.two,.two-a,.two-b{grid-template-columns:1fr}}
.two-c{grid-template-columns:minmax(0,1fr) minmax(0,400px);padding-top:0}
@media(max-width:900px){.two-c{grid-template-columns:1fr}}

/* ═══ SEGNALI — la tavola ════════════════════════════════════════════
   Non un campo 3D generico: il linguaggio che NEOLOGY ha gia'.
   Nove riquadri, due inchiostrati e sette ancora neri. Il bianco del
   sito fa da gutter, come su una pagina stampata.                     */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.tavola-testa{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:var(--s3) 0 var(--s2);border-bottom:1px solid var(--ink)}
.tavola{display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(74px,auto);gap:9px;margin-top:14px}

.riq{position:relative;overflow:hidden;background:var(--ink);
  box-shadow:0 1px 0 rgba(10,13,15,.18);min-height:96px;display:block}
.riq img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.86;transition:opacity 200ms var(--ease-out),transform 260ms var(--ease-out)}
a.riq:hover img{opacity:1;transform:scale(1.015)}
a.riq:active img{transform:scale(1.005)}

/* il numero, come la numerazione di una tavola */
.riq-n{position:absolute;left:12px;top:10px;z-index:2;font-family:var(--mono);
  font-size:var(--t0);letter-spacing:.2em;color:#EDF3F5;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}

/* la didascalia: una cassetta bianca appoggiata dentro il riquadro */
.riq-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:var(--panel);border-top:1px solid var(--ink);
  padding:11px 14px;display:grid;gap:3px}
.riq-cap b{font-family:var(--display);font-weight:400;font-size:var(--t3);
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);line-height:1}
.riq-cap i{font-style:normal;font-size:var(--t0);color:var(--mid);line-height:1.4}

/* i sette ancora sotto: nero pieno, retinatura appena percettibile */
.riq.nero{display:grid;place-items:center;min-height:74px;
  background-color:#080B0D;
  background-image:
    repeating-linear-gradient(58deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px),
    radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);
  background-size:auto,6px 6px}
/* a riposo si vede che ci sono, non cosa sono: solo il numero.
   La dicitura arriva al passaggio o col fuoco da tastiera. */
.riq-sotto{font-family:var(--mono);font-size:var(--t0);letter-spacing:var(--track);
  text-transform:uppercase;color:#8FA0A7;opacity:0;
  transition:opacity 200ms var(--ease-out)}
.riq.nero:hover .riq-sotto,.riq.nero:focus-visible .riq-sotto{opacity:1}
.riq.nero:hover{background-color:#0C1114}
.riq:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.tavola-piede{display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;padding-top:var(--s2)}

#registro{margin-top:var(--s3);border-top:1px solid var(--ink);padding-top:var(--s2)}

/* su schermo stretto la tavola si impila: due colonne, i riquadri veri interi */
@media(max-width:820px){
  .tavola{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(120px,auto)}
  .riq{grid-column:auto!important;grid-row:auto!important}
  .riq.inchiostrato{grid-column:1/-1!important}
}

/* ═══ menu: la stella al centro ══════════════════════════════════════
   Griglia 1fr auto 1fr: la stella e' esattamente al centro qualunque
   sia la lunghezza delle voci, e i due gruppi le si appoggiano ai lati. */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(18px,3vw,44px);height:66px}
.nav .sx,.nav .dx{display:flex;align-items:stretch;gap:clamp(12px,2.1vw,30px);
  list-style:none;margin:0;padding:0;font-family:var(--mono);
  font-size:var(--t0);letter-spacing:var(--track);color:var(--soft);
  overflow-x:auto;scrollbar-width:none;min-width:0}
.nav .sx{justify-content:flex-end}
.nav .dx{justify-content:flex-start}
.nav .sx::-webkit-scrollbar,.nav .dx::-webkit-scrollbar{display:none}
.nav li{display:flex}
.brand{justify-self:center;display:grid;place-items:center;min-width:44px;min-height:44px}
.brand svg{height:30px}
.brand:hover svg{fill:#000}
/* SUBMIT non e' piu' un bottone staccato: e' l'ultima voce di destra,
   marcata perche' e' l'unica azione della barra */
.nav .dx li:last-child a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.nav .dx li:last-child a:hover{box-shadow:inset 0 -2px 0 var(--ink)}
/* Sotto i 760px la simmetria non ci sta: i due gruppi venivano tagliati e
   scorrevano ognuno per conto suo. Diventa una riga sola che scorre,
   con la stella in testa. */
@media(max-width:760px){
  .nav{display:flex;align-items:center;gap:16px;height:58px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav .sx,.nav .dx{overflow:visible;gap:16px;font-size:10px;letter-spacing:.14em;flex:none}
  .brand{order:-1;justify-self:auto;flex:none;margin-right:2px}
  .nav a{white-space:nowrap}
  /* un po' di respiro in coda, se no SUBMIT tocca il bordo */
  .nav .dx{padding-right:var(--pad)}
}

/* ═══ manga: lo scaffale dei capitoli ════════════════════════════════
   Copertine come volumi, non miniature di tavole. Ognuna porta alla
   sua pagina; quelle non ancora fatte lo dicono invece di fingersi. */
.scaffale{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(20px,3vw,38px);padding-top:26px}
.vol{display:grid;gap:0}
.vol-cv{aspect-ratio:2/3;background:var(--dark);overflow:hidden;position:relative;
  box-shadow:0 18px 40px -22px rgba(10,13,15,.55),0 1px 2px rgba(10,13,15,.14);
  transition:box-shadow 220ms var(--ease-out)}
/* il dorso: un volume, non una figurina */
.vol-cv::after{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%,rgba(0,0,0,.35));
  pointer-events:none}
.vol-cv img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 260ms var(--ease-out)}
.vol-cv .vuota{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(158deg,#252D31 0%,#131A1D 46%,#0A0E10 100%)}
a.vol:hover .vol-cv{box-shadow:0 26px 52px -22px rgba(10,13,15,.62),0 2px 4px rgba(10,13,15,.16)}
a.vol:hover .vol-cv img{transform:scale(1.03)}
a.vol:active .vol-cv img{transform:scale(1.01)}
.vol-m{display:grid;gap:5px;padding-top:16px}
.vol-t{font-family:var(--display);font-size:var(--t4);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);line-height:1}
.vol.non .vol-t{color:var(--soft)}
.vol-st{color:var(--ink);letter-spacing:var(--track-wide)}
.vol.non .vol-st{color:var(--soft)}

/* ═══ rifiniture della passata UI ════════════════════════════════════ */

/* i titoli non ancora scritti non vanno nel font display: "[da confermare]"
   a 24px in Neo-Display andava a capo e sembrava rotto */
.vol-t.attesa,.artist.attesa{font-family:var(--mono);font-size:var(--t1);
  letter-spacing:var(--track);text-transform:uppercase;color:var(--soft);line-height:1.3}

/* i segnaposto parlano una lingua sola: materia scura, mai riquadri grigi */
.attesa16{aspect-ratio:16/9;display:grid;place-items:center;gap:12px;align-content:center;
  background:linear-gradient(158deg,#252D31 0%,#131A1D 46%,#0A0E10 100%);
  box-shadow:0 18px 40px -22px rgba(10,13,15,.5),0 1px 2px rgba(10,13,15,.12)}
.attesa16 .small{color:#8FA0A7}

/* SUBMIT si distingue dalla voce attiva: e' l'unica azione, non una pagina */
.nav .dx li:last-child a{color:var(--panel);background:var(--ink);box-shadow:none;
  padding:0 15px;letter-spacing:.2em}
.nav .dx li:last-child a:hover{background:#000;box-shadow:none}
.nav .dx li:last-child a.on{box-shadow:none}

/* intestazione di sezione come barra: titolo e sottotitolo a sinistra,
   l'azione a destra, una riga sottile che tiene insieme le due cose.
   Prima il bottone galleggiava a meta' frase. */
.sez{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.sez h2{white-space:nowrap}
.sez .small{color:var(--soft)}
.sez .cta{margin-left:auto;min-height:38px;padding:0 22px}

/* ritmo verticale piu' stretto fra le sezioni della stessa pagina */
.section{margin-top:var(--s4)}

/* ═══ PASSATA NATIVA — comportarsi da app, non da sito ═══════════════ */

html{
  -webkit-text-size-adjust:100%;        /* Safari non ingrandisce da solo in orizzontale */
  overscroll-behavior-y:none;           /* niente rimbalzo che trascina tutta la pagina */
}
body{
  /* il flash azzurro Android a ogni tocco era l'unico colore del sito */
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
/* tolto l'evidenziatore di sistema, il tocco deve avere una risposta sua */
@media(hover:none){
  a:active,button:active,.riq:active,.vol:active{opacity:.72}
  .cta:active,.dsp a:active,.dsp button:active{opacity:1}
}
/* i testi lunghi si selezionano, i comandi no: e' cosi' che si comporta un'app */
.nav,.player,.cta,.submit,.tag,.riq-n,.vol-st{-webkit-user-select:none;user-select:none}

/* ── tacca e barra home: la cornice fissa deve stare fuori dalle zone di sistema ── */
.nav{padding-left:max(var(--pad),env(safe-area-inset-left));
     padding-right:max(var(--pad),env(safe-area-inset-right))}
.player{
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
  padding-bottom:env(safe-area-inset-bottom);
  height:calc(64px + env(safe-area-inset-bottom))}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left));
      padding-right:max(var(--pad),env(safe-area-inset-right))}
footer{padding-left:max(var(--pad),env(safe-area-inset-left));
       padding-right:max(var(--pad),env(safe-area-inset-right))}

/* ── la barra si ritira quando scendi e torna appena risali ──
   Su un telefono 58px di nav + 64px di player sono 122px di cornice
   fissa su 844: recuperarne la meta' quando si legge cambia molto. */
.nav{transition:transform 220ms var(--ease-out)}
body.giu .nav{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.nav{transition:none}body.giu .nav{transform:none}}

/* ── bersagli: nessun comando sotto i 44px al dito ── */
@media(pointer:coarse){
  .nav a{padding:0 8px}
  /* i link dentro le liste dati sono comandi anche quando sembrano testo */
  .facts dd a,.link a,aside a{min-height:44px;padding:4px 6px;margin:-4px -6px}
  .sez .cta{min-height:44px;padding:0 22px}
  .player button{width:44px;height:44px}
  .player .track{padding:0}
  a.row,button.row{min-height:48px}
}
/* la barra del brano: alta 3px a vista, ma un vero bersaglio da toccare */
.player .track{position:relative}
.player .track::before{top:-21px;bottom:-21px}

/* ── il reader su telefono: la tavola a piena larghezza ── */
@media(max-width:640px){
  .pageimg{width:100%;max-width:none}
  .reader > div{padding:16px 0!important}
}

/* ═══ v1 — la stella si vede, e su mobile e' il menu ═════════════════ */
.brand svg{height:26px}
.menu-btn{display:none}
.menu{position:fixed;inset:0;z-index:60;background:var(--ground);
  display:grid;grid-template-rows:auto 1fr auto;justify-items:center;
  padding:calc(10px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom))}
.menu[hidden]{display:none!important}
.menu-x{background:none;border:0;padding:0;color:var(--ink);
  width:56px;height:56px;display:grid;place-items:center;cursor:var(--neo-cursor),pointer}
.menu-voci{list-style:none;margin:0;padding:0;align-self:center;display:grid;gap:6px;text-align:center}
.menu-voci a{font-family:var(--display);font-size:clamp(30px,9vw,46px);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);display:block;padding:8px 20px;line-height:1.05}
.menu-voci a.on{color:var(--soft)}
.menu-voci li:last-child a{font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--track);
  margin-top:18px;background:var(--ink);color:var(--panel);padding:16px 30px;display:inline-block}
.menu-home{opacity:.9}
body.menu-aperto{overflow:hidden}
body.menu-aperto .player{visibility:hidden}

@media(max-width:760px){
  /* barra: solo la stella al centro, che apre il menu */
  .nav{display:grid;grid-template-columns:1fr auto 1fr;overflow:visible;height:60px}
  .nav .sx,.nav .dx{display:none}
  .nav a.brand{display:none}
  .menu-btn{display:grid;place-items:center;grid-column:2;background:none;border:0;
    padding:0;color:var(--ink);width:56px;height:56px;cursor:var(--neo-cursor),pointer}
  .menu-btn:active{opacity:.6}
  .nav .dx{padding-right:0}
}

/* ═══ v1 — il player ═════════════════════════════════════════════════
   Prima: una barra da 64px con un triangolino e una linea, e sotto i
   640px spariva pure il titolo. Ora: copertina, brano sempre leggibile,
   controlli da 44px, e su tocco si apre a schermo intero.              */
.player{height:calc(72px + env(safe-area-inset-bottom));gap:clamp(12px,2vw,20px);
  background:#0A0D0F;border-top:1px solid #1A2024}
.player button.p-open{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;
  width:auto;height:auto;color:inherit;text-align:left;min-width:0;flex:0 1 320px;
  cursor:var(--neo-cursor),pointer;position:static}
.player button.p-open::before{display:none}
.p-open:active{opacity:.75}
.p-cover{width:48px;height:48px;object-fit:cover;flex:none;display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.6)}
.p-meta{display:grid;gap:3px;min-width:0}
.p-title{font-family:var(--display);font-size:var(--t3);letter-spacing:.05em;
  text-transform:uppercase;color:#F1F2F3;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-sub{font-family:var(--mono);font-size:var(--t0);letter-spacing:.14em;color:#8FA0A7;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .now{display:none}
.p-play{width:44px!important;height:44px!important;border-color:#586369!important}
.player .track{flex:1 1 auto}
@media(max-width:640px){
  .player{gap:12px}
  .player button.p-open{flex:1 1 auto}
  .player .track,.player .t{display:none}     /* sul telefono la barra vive nel player aperto */
  .p-play{margin-left:auto}
}

/* — il player aperto — */
.pfull{position:fixed;inset:0;z-index:70;background:#06080A;color:#F1F2F3;
  display:grid;grid-template-rows:auto 1fr auto auto auto auto;justify-items:center;
  gap:22px;padding:calc(12px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto}
.pfull[hidden]{display:none!important}
.pfull-x{justify-self:end;background:none;border:0;color:#F1F2F3;width:48px;height:48px;
  font-size:18px;display:grid;place-items:center;cursor:var(--neo-cursor),pointer}
.pfull-cover{width:min(78vw,420px,calc(100dvh - 420px));height:auto;aspect-ratio:1;object-fit:cover;
  align-self:center;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.pfull-meta{display:grid;gap:8px;text-align:center;justify-items:center}
.pfull-meta .cat-no{color:#8FA0A7}
.pfull-title{font-family:var(--display);font-size:var(--t5);letter-spacing:.05em;text-transform:uppercase;line-height:1}
.pfull-sub{font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--track);color:#8FA0A7;text-transform:uppercase}
.pfull-track{width:min(100%,520px);display:grid;gap:12px}
.pfull-track .track{position:relative;height:3px;background:#2A3236}
.pfull-track .fill{position:absolute;left:0;top:0;bottom:0;background:#F1F2F3;width:0}
.pfull-track .pin{position:absolute;top:-6px;width:2px;height:15px;background:#8FB0BB}
.pfull-times{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:var(--t0);letter-spacing:.14em;color:#8FA0A7;font-variant-numeric:tabular-nums}
.pfull-drops{display:flex;gap:10px;justify-content:center;margin-top:6px}
.pfull-drops button{background:none;border:1px solid #2A3236;color:#F1F2F3;padding:10px 16px;
  min-height:44px;display:grid;gap:2px;justify-items:center;cursor:var(--neo-cursor),pointer;font:inherit}
.pfull-drops button:hover{border-color:#8FB0BB}
.pfull-drops .small{color:#8FA0A7}
.pfull-drops .num-mono{font-size:var(--t1);color:#F1F2F3}
.pfull-play{width:72px;height:72px;border-radius:50%;border:1px solid #586369;background:#F1F2F3;
  color:#0A0D0F;display:grid;place-items:center;cursor:var(--neo-cursor),pointer}
.pfull-play .tri{width:0;height:0;border-left:16px solid currentColor;border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:4px}
.pfull-play .pause{width:14px;height:18px;border-left:5px solid currentColor;border-right:5px solid currentColor}
.pfull-link{font-family:var(--mono);font-size:var(--t0);letter-spacing:var(--track);color:#8FA0A7;
  text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
.pfull-link:hover{color:#F1F2F3}
body.player-aperto{overflow:hidden}

/* ═══ v1 — i due video su ogni uscita ═══════════════════════════════ */
.due-video{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(20px,3vw,40px);padding-top:22px}
.due-video .cat-no{display:block;margin-bottom:12px}
.due-video .clip{margin-top:0}

/* ═══ v1 — il manga: copertina che si apre, tavole in verticale ═════ */
.leggi-cv{position:relative;background:none;border:0;padding:0;display:block;width:100%;
  cursor:var(--neo-cursor),pointer;text-align:left}
.leggi-cv img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;display:block;
  box-shadow:0 18px 40px -22px rgba(10,13,15,.55),0 1px 2px rgba(10,13,15,.14);
  transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out)}
.leggi-cv:hover img{transform:scale(1.015);box-shadow:0 26px 52px -22px rgba(10,13,15,.62)}
.leggi-cv:active img{transform:scale(1.005)}
.leggi-cta{position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:var(--t0);
  letter-spacing:var(--track);text-transform:uppercase;color:var(--panel);background:var(--ink);
  padding:10px 14px}
.leggi-cv:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* il lettore: buio dietro, si scorre verso il basso */
.reader-lb{position:fixed;inset:0;z-index:80;background:rgba(6,8,10,.96);color:#F1F2F3;
  display:grid;grid-template-rows:auto 1fr}
.reader-lb[hidden]{display:none!important}
.reader-bar{display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right))
          8px max(var(--pad),env(safe-area-inset-left));
  border-bottom:1px solid rgba(255,255,255,.08)}
.reader-bar .small{color:#A2ACB1;font-variant-numeric:tabular-nums}
.reader-x{background:none;border:0;color:#F1F2F3;width:48px;height:48px;font-size:18px;
  display:grid;place-items:center;cursor:var(--neo-cursor),pointer;margin-right:-12px}
.reader-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:grid;justify-items:center;gap:8px;
  padding:14px 0 calc(40px + env(safe-area-inset-bottom));scroll-snap-type:y proximity}
.reader-scroll img{width:min(100%,720px);height:auto;display:block;scroll-snap-align:start;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.9)}
@media(max-width:640px){.reader-scroll{gap:0;padding-top:0}.reader-scroll img{width:100%}}
body.reader-aperto{overflow:hidden}
body.reader-aperto .player,body.reader-aperto .nav{visibility:hidden}

/* le vecchie regole del reader a frecce non servono piu' */
.reader,.pageimg{display:revert}
.two-d{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
@media(max-width:900px){.two-d{grid-template-columns:1fr}.leggi-cv{max-width:300px}}

/* ═══ la soglia — home v1 ════════════════════════════════════════════
   L'unica pagina scura oltre al player: un fotogramma del mondo a tutto
   schermo, la stella intera, il nome. Nessuna scelta da fare: si entra.  */
.soglia{position:relative;min-height:calc(100dvh - 60px - 72px - env(safe-area-inset-bottom));
  display:grid;place-items:center;overflow:hidden;background:#06080A;color:#F1F2F3;
  margin:0}
.soglia-fondo,.soglia-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.soglia-fondo img{width:100%;height:100%;object-fit:cover;display:block}
.soglia-loop{opacity:0;transition:opacity 900ms var(--ease-out)}
.soglia-loop.pronto{opacity:1}
/* respiro lentissimo sul fondo: vive senza chiedere attenzione */
@media(prefers-reduced-motion:no-preference){
  .soglia-fondo img,.soglia-loop{animation:respiro 26s var(--ease-in-out) infinite alternate}
  @keyframes respiro{from{transform:scale(1)}to{transform:scale(1.06)}}
}
@media(prefers-reduced-motion:reduce){.soglia-loop{display:none}}
/* velo: il centro resta leggibile, i bordi tengono l'immagine */
.soglia-velo{position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 48%,rgba(6,8,10,.62) 0%,rgba(6,8,10,.28) 55%,rgba(6,8,10,0) 100%),
             linear-gradient(180deg,rgba(6,8,10,.55) 0%,rgba(6,8,10,0) 28%,rgba(6,8,10,0) 70%,rgba(6,8,10,.7) 100%)}
.soglia-corpo{position:relative;display:grid;justify-items:center;gap:0;text-align:center;
  padding:clamp(30px,6vh,70px) var(--pad)}
.soglia-stella{filter:drop-shadow(0 6px 22px rgba(0,0,0,.6))}
.soglia-nome{margin:28px 0 0}
.soglia-nome img{width:min(300px,58vw);height:auto;filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(0,0,0,.55))}
.soglia-riga{margin-top:24px;color:#C7CFD2}
.soglia-cta{margin-top:44px;background:#F1F2F3;color:#0A0D0F;border-color:#F1F2F3;padding:0 40px}
.soglia-cta:hover{background:#fff}
.soglia-nota{position:absolute;left:max(var(--pad),env(safe-area-inset-left));bottom:18px;color:#8FA0A7}
/* la home non ha il piede: la soglia arriva al player */
body.home footer{display:none}
body.home main{display:grid}

/* ═══ v1 — le due porte: area artista e pannello A&R ══════════════════
   "Accedi" e' un servizio, non una voce di navigazione: sta in fondo a destra,
   staccato dalle altre, e non eredita il trattamento da bottone che l'ultima
   voce (SUBMIT) ha per essere la chiamata all'azione. */
.nav .dx li.accedi{margin-left:auto;padding-left:clamp(12px,2.1vw,30px)}
.nav .dx li.accedi a{color:var(--soft);background:transparent;box-shadow:none;
  font-size:var(--t0);letter-spacing:var(--track)}
.nav .dx li.accedi a:hover{color:var(--ink);background:transparent;box-shadow:none}
.nav .dx li.accedi a.on{background:transparent;box-shadow:inset 0 -1px 0 var(--ink)}

/* Nel menu a tutto schermo si separano dalle voci vere con una riga sottile. */
.menu-voci li.servizio a{font-size:var(--t2);letter-spacing:var(--track-wide);color:var(--soft)}
.menu-voci li.servizio:first-of-type{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--rule)}

footer a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--edge)}
footer a:hover{color:var(--ink)}

/* ═══ v1 — submit: la pagina che spiega, non il modulo ════════════════ */
.testa-submit{border-bottom:1px solid var(--ink);padding:34px 0 22px;
  display:flex;align-items:flex-end;gap:clamp(24px,5vw,60px);flex-wrap:wrap}
.titolo-submit{font-size:clamp(26px,4vw,40px);margin-top:10px}
.finestra{font-size:var(--t0);letter-spacing:var(--track-wide);margin-top:10px;color:var(--mid);
  min-height:1.4em}
.lede-submit{margin-left:auto;text-align:right;max-width:34ch}

.cerca{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  margin:var(--s4) 0;border:1px solid var(--rule)}
.cerca-b{background:var(--panel);padding:clamp(20px,3vw,34px)}
.cerca-n{font-size:var(--t0);letter-spacing:var(--track-wide);color:var(--soft)}
.cerca-t{font-size:var(--t3);margin:10px 0 8px}
.cerca-p{color:var(--mid);margin:0;max-width:44ch}

.non-cerchiamo{border-left:2px solid var(--ink);padding-left:var(--s2);max-width:62ch;
  color:var(--mid);margin:var(--s4) 0}

.percorso{margin-top:var(--s5)}
.passi{list-style:none;margin:var(--s2) 0 0;padding:0}
.passo{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.passo:first-child{border-top:0}
.passo-n{font-size:var(--t0);color:var(--soft);letter-spacing:var(--track);padding-top:3px}
.passo-t{display:block;font-size:var(--t2)}
.passo-p{display:block;color:var(--mid);font-size:var(--t1);margin-top:3px}

.serve{list-style:none;margin:var(--s2) 0 0;padding:0}
.serve li{padding:12px 0;border-top:1px solid var(--rule);color:var(--mid)}
.serve li:first-child{border-top:0}
.serve b{color:var(--ink);font-weight:600}

.accetta{margin-top:var(--s4);border-top:1px solid var(--ink);padding-top:var(--s3)}
.accetta-l{display:flex;gap:12px;align-items:flex-start;color:var(--mid);
  font-size:var(--t1);margin-bottom:var(--s2);cursor:pointer;max-width:52ch}
.accetta-l input{width:22px;height:22px;flex:none;margin:1px 0 0}
/* Il bottone resta visibile ma inerte finche' la spunta non c'e': nascondere
   la via d'uscita e' peggio che mostrarla spenta. */
.cta[aria-disabled="true"]{opacity:.35;pointer-events:auto;cursor:not-allowed}
.gia{margin-top:var(--s2)}
.gia a{color:var(--ink)}

@media (max-width:760px){
  .cerca{grid-template-columns:1fr}
  .lede-submit{margin-left:0;text-align:left}
}