/* La Bottega dell'Inchiostro — configuratore. Usa i token del tema quando ci sono. */

.officina{
  --off-fondo:var(--cuoio,#1a1413);
  --off-linea:var(--linea-forte,rgba(231,221,199,.26));
  --off-testo:var(--osso,#e7ddc7);
  --off-tenue:var(--osso-tenue,#a0938a);
  --off-sangue:var(--sangue-vivo,#c4302a);
  --off-oro:var(--oro,#c9a15a);
  --off-util:var(--util,'Barlow Condensed',sans-serif);
  --off-display:var(--display,Georgia,serif);

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
  max-width:1180px;margin:0 auto;padding:0 24px;
  color:var(--off-testo);
}
@media(max-width:900px){.officina{grid-template-columns:1fr}}

/* --- Scena: il capo --- */
.officina-scena{position:sticky;top:86px}
@media(max-width:900px){.officina-scena{position:static}}

.officina-capo{
  position:relative;background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.05),transparent 65%),
    linear-gradient(180deg,#161110,#0a0807);
  border:1px solid var(--off-linea);border-radius:2px;padding:18px;
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.officina-tela{position:relative;width:100%;height:100%;aspect-ratio:400/470;
  max-height:100%;margin:auto;display:flex;align-items:center;justify-content:center}
.officina-svg{width:100%;height:100%;display:block}
.off-tessuto{fill:#0d0b0a;stroke:rgba(0,0,0,.55);stroke-width:2;
  transition:fill .35s ease;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.off-cucitura{stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-dasharray:5 5}
.off-sagoma[hidden]{display:none}

.officina-stampa{
  position:absolute;object-fit:contain;pointer-events:none;
  transition:width .35s cubic-bezier(.22,1,.36,1),left .35s cubic-bezier(.22,1,.36,1),
             top .35s cubic-bezier(.22,1,.36,1),opacity .3s ease;
  mix-blend-mode:normal;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.officina-vuoto{position:absolute;font-family:var(--off-util);letter-spacing:.22em;
  text-transform:uppercase;font-size:13px;color:var(--off-tenue);text-align:center;padding:0 20px}
.officina-didascalia{font-size:13px;color:var(--off-tenue);margin:12px 0 0;line-height:1.55}

/* --- Pannello --- */
.officina-passo{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid rgba(231,221,199,.12)}
.officina-passo:last-of-type{border-bottom:0}
.officina-titolo{font-family:var(--off-util);font-size:17px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 16px;display:flex;align-items:baseline;gap:12px}
.officina-titolo span{font-family:var(--off-display);font-size:15px;color:var(--off-sangue);letter-spacing:0}

/* Personaggi */
.officina-personaggi{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.officina-pg input{position:absolute;opacity:0;width:0;height:0}
.officina-pg-in{display:block;border:1px solid var(--off-linea);border-radius:2px;overflow:hidden;
  background:#100c0b;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.officina-pg:hover .officina-pg-in{transform:translateY(-2px)}
.officina-pg input:checked + .officina-pg-in{border-color:var(--off-sangue);
  box-shadow:0 0 0 1px var(--off-sangue),0 14px 26px -18px var(--off-sangue)}
.officina-pg input:focus-visible + .officina-pg-in{outline:2px solid var(--off-oro);outline-offset:2px}
.officina-pg-in img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.officina-pg-iniziale{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;
  font-family:var(--off-display);font-size:2rem;color:var(--off-tenue);
  background:linear-gradient(180deg,#1c1513,#0c0908)}
.officina-pg-nome{display:block;font-family:var(--off-util);font-size:15px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 8px 0;text-align:center}
.officina-pg-epiteto{display:block;font-family:var(--off-util);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--off-tenue);padding:0 8px 9px;text-align:center}

/* Scelte a riga */
.officina-scelte{display:grid;gap:9px}
.officina-scelta input{position:absolute;opacity:0;width:0;height:0}
.officina-scelta > span{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  border:1px solid var(--off-linea);border-radius:2px;padding:13px 16px;cursor:pointer;
  background:#100c0b;transition:border-color .2s,background-color .2s}
.officina-scelta:hover > span{border-color:rgba(231,221,199,.4)}
.officina-scelta input:checked + span{border-color:var(--off-sangue);background:#171010}
.officina-scelta input:focus-visible + span{outline:2px solid var(--off-oro);outline-offset:2px}
.officina-scelta strong{font-family:var(--off-util);font-size:17px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase}
.officina-scelta em{font-style:normal;font-size:14px;color:var(--off-tenue);flex:1 1 auto}
.officina-scelta b{font-family:var(--off-util);font-size:17px;color:var(--off-oro);letter-spacing:.06em}

/* Colori */
.officina-colori{display:flex;flex-wrap:wrap;gap:14px}
.officina-colore{text-align:center;cursor:pointer}
.officina-colore input{position:absolute;opacity:0;width:0;height:0}
.officina-colore > span{display:block;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(231,221,199,.35);transition:box-shadow .2s,transform .2s}
.officina-colore:hover > span{transform:translateY(-2px)}
.officina-colore input:checked + span{box-shadow:0 0 0 2px #0a0807,0 0 0 4px var(--off-sangue)}
.officina-colore input:focus-visible + span{outline:2px solid var(--off-oro);outline-offset:3px}
.officina-colore em{display:block;font-style:normal;font-family:var(--off-util);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--off-tenue);margin-top:7px}

/* Taglie */
.officina-taglie{display:flex;flex-wrap:wrap;gap:8px}
.officina-taglia input{position:absolute;opacity:0;width:0;height:0}
.officina-taglia > span{display:block;min-width:56px;text-align:center;padding:11px 8px;
  border:1px solid var(--off-linea);border-radius:2px;cursor:pointer;background:#100c0b;
  font-family:var(--off-util);font-size:16px;font-weight:600;letter-spacing:.12em;
  transition:border-color .2s,background-color .2s}
.officina-taglia:hover > span{border-color:rgba(231,221,199,.4)}
.officina-taglia input:checked + span{border-color:var(--off-sangue);background:#171010;color:#fff}
.officina-taglia input:focus-visible + span{outline:2px solid var(--off-oro);outline-offset:2px}

/* Chiusura */
.officina-chiusura{border-top:1px solid var(--off-linea);padding-top:22px;margin-top:6px}
.officina-riepilogo{font-family:var(--off-util);font-size:16px;letter-spacing:.06em;
  color:var(--off-tenue);margin:0 0 16px;line-height:1.6}
.officina-riepilogo b{color:var(--off-testo)}
.officina-invia{width:100%;justify-content:center}

@media (prefers-reduced-motion:reduce){
  .officina *{transition-duration:.01ms!important}
}