/* SAGA — temperatura "epica". Indaco di mezzanotte, oro, cremisi.
   Bordature doppie, fregi a rombo, titoli da saga.
   Tratti presi da _design/saga.html: se quel prototipo cambia, questo lo segue. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Alegreya:ital,wght@0,400;0,600;0,800;1,400&display=swap');

:root{
  --void:      oklch(17% .05 280);
  --deep:      oklch(23% .06 278);
  --hall:      oklch(28% .065 275);
  --gold:      oklch(80% .14 88);
  --gold-deep: oklch(62% .13 80);
  --crim:      oklch(58% .22 28);
  --azure:     oklch(70% .14 230);
  --bone:      oklch(92% .025 90);
  --dim:       oklch(70% .045 280);
  --font-display:"Cinzel", "Times New Roman", serif;
  --font-body:"Alegreya", Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
body{
  background:var(--void); color:var(--bone);
  font:400 1.06rem/1.8 var(--font-body);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  min-height:100svh; display:flex; flex-direction:column;
}
::selection{ background:var(--crim); color:var(--bone) }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
img{ display:block; max-width:100% }

/* le due luci di fondo e la grana: sono loro a dare profondita' alla pagina */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 30% at 50% 0%, oklch(80% .14 88 / .07), transparent 70%),
    radial-gradient(45% 30% at 92% 55%, oklch(70% .14 230 / .07), transparent 70%),
    radial-gradient(45% 30% at 6% 85%, oklch(58% .22 28 / .09), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── la barra fissa ────────────────────────────────────────── */
.hud{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.72rem .95rem;
  background:color-mix(in oklch, var(--void) 82%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid oklch(80% .14 88 / .4);
}
.hud__chip{
  display:inline-flex; align-items:center; gap:.5em;
  font:800 .66rem/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); text-decoration:none;
}
.hud__chip b{ color:var(--gold) }
.hud__chip:hover b{ text-shadow:0 0 12px oklch(80% .14 88 / .7) }
.hud__dot{
  width:.55em; height:.55em; flex:none; transform:rotate(45deg);
  background:var(--crim); box-shadow:0 0 9px var(--crim);
}

/* ── impaginato ────────────────────────────────────────────── */
main{ flex:1; padding:1.5rem 1.1rem 3rem; display:grid; gap:2.2rem; align-content:start }
h1{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.9rem, 8vw, 3rem); line-height:1.08; text-transform:uppercase;
  color:var(--bone); text-align:center; text-wrap:balance;
  text-shadow:0 .04em 0 var(--gold-deep), 0 .12em .35em oklch(8% .03 280 / .9),
              0 0 1em oklch(80% .14 88 / .4);
}
h1::before,h1::after{
  content:""; display:block; height:2px; width:min(300px,60%); margin:.9rem auto;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.35rem, 5.6vw, 2rem); line-height:1.2; text-transform:uppercase;
  color:var(--gold); margin-bottom:.9rem;
  text-shadow:0 .05em 0 oklch(40% .1 80), 0 0 .7em oklch(80% .14 88 / .4);
}
h2::after{
  content:""; display:block; height:1px; width:46%; margin-top:.6rem;
  background:linear-gradient(90deg, var(--gold), transparent);
}
h3{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; text-transform:uppercase; color:var(--gold) }
p{ max-width:62ch; color:oklch(86% .03 285) }
p + p{ margin-top:1.05rem }
strong{ color:var(--gold); font-weight:800 }
em{ color:var(--azure); font-style:italic }
a{ color:var(--gold); text-underline-offset:.25em }
a:hover{ color:var(--bone); text-shadow:0 0 12px oklch(80% .14 88 / .6) }
code{ font-family:ui-monospace,Menlo,monospace; font-size:.9em; color:var(--azure) }
hr{ border:0; border-top:1px solid oklch(80% .14 88 / .3); margin:1.4rem 0 }

/* ── la lastra: doppia bordatura e fregio a rombo ──────────── */
.slab{
  position:relative;
  background:linear-gradient(168deg, var(--hall), var(--deep) 78%);
  border:1px solid oklch(80% .14 88 / .45);
  outline:1px solid oklch(80% .14 88 / .25); outline-offset:5px;
  padding:1.9rem 1.4rem;
  box-shadow:0 24px 50px oklch(8% .03 280 / .8), inset 0 1px 0 oklch(80% .14 88 / .25);
}
.slab::before{
  content:""; position:absolute; top:-9px; left:50%; translate:-50% 0;
  width:14px; height:14px; transform:rotate(45deg);
  background:var(--void); border:2px solid var(--gold);
  box-shadow:0 0 14px oklch(80% .14 88 / .55);
}
/* l'inclinazione alternata: e' quella che toglie l'aria da ufficio */
.slab:nth-of-type(odd){ transform:rotate(.4deg) }
.slab:nth-of-type(even){ transform:rotate(-.4deg) }
.slab > *{ transform:rotate(0) }

blockquote{
  margin:1.6rem 0; padding:1.6rem 1.4rem; text-align:center;
  background:radial-gradient(85% 130% at 50% 0%, oklch(80% .14 88 / .12), transparent 72%);
}
blockquote::before{
  content:"❖"; display:block; color:var(--crim); font-size:1.2rem;
  margin-bottom:.8rem; text-shadow:0 0 12px var(--crim);
}
blockquote p{
  font:600 italic 1.25rem/1.7 var(--font-body); color:var(--bone); max-width:none;
  text-shadow:0 0 20px oklch(80% .14 88 / .35);
}

/* ── liste col rombo ───────────────────────────────────────── */
.log{ list-style:none; display:grid; gap:.65rem; margin-top:1.1rem }
.log li{
  display:flex; align-items:baseline; gap:.8em; flex-wrap:wrap;
  font:800 .86rem/1.6 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  padding:.75em 1.1em; background:oklch(21% .055 280);
  border:1px solid oklch(80% .14 88 / .3);
}
.log li::before{
  content:""; flex:none; width:.6em; height:.6em; translate:0 .05em; transform:rotate(45deg);
  border:2px solid var(--gold); box-shadow:0 0 8px oklch(80% .14 88 / .5);
}
.log li.done{ color:var(--dim); text-decoration:line-through; text-decoration-color:var(--crim) }
.log li.done::before{ background:var(--gold) }
.log a{ text-decoration:none }

/* ── il bottone esagonale ──────────────────────────────────── */
button, .btn{
  font:700 1rem/1 var(--font-display); text-transform:uppercase; letter-spacing:.1em;
  color:var(--void); background:linear-gradient(180deg, var(--gold), var(--gold-deep));
  padding:1.1em 2.4em; border:0; cursor:pointer; display:inline-block; text-decoration:none;
  clip-path:polygon(1em 0, calc(100% - 1em) 0, 100% 50%, calc(100% - 1em) 100%, 1em 100%, 0 50%);
  box-shadow:0 0 40px oklch(80% .14 88 / .5);
  transition:transform .12s ease-out, box-shadow .12s ease-out;
}
button:hover, .btn:hover{ box-shadow:0 0 60px oklch(80% .14 88 / .8); color:var(--void) }
button:active, .btn:active{ transform:scale(.96) }
button.danger{ background:linear-gradient(180deg, var(--crim), oklch(42% .16 28)); color:var(--bone) }

/* ── form ──────────────────────────────────────────────────── */
form{ display:grid; gap:1rem; justify-items:start }
label{
  font:800 .68rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:.5em;
}
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea{
  font:400 1rem/1.5 var(--font-body); color:var(--bone);
  background:oklch(21% .055 280); border:1px solid oklch(80% .14 88 / .35);
  padding:.7em .9em; width:100%; max-width:34rem;
}
textarea{ min-height:7rem; resize:vertical }
input:focus, select:focus, textarea:focus{ border-color:var(--gold); outline:none }
form p{ margin:0; width:100%; max-width:34rem }
.errorlist{ list-style:none; color:var(--crim); font-size:.85rem; font-weight:800 }
.helptext{ display:block; color:var(--dim); font-size:.8rem; font-style:italic }
input[type=checkbox]{ accent-color:var(--gold); width:auto; margin-right:.5em }

/* ── didascalie e note ─────────────────────────────────────── */
.kicker{
  display:inline-block; padding:.5em 1.1em;
  font:800 .66rem/1 var(--font-body); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); border-top:2px solid var(--gold); border-bottom:2px solid var(--gold);
  text-shadow:0 0 16px oklch(80% .14 88 / .6);
}
.muted{ color:var(--dim); font-style:italic; font-size:.92rem }
.foot{
  padding:0 1.1rem 2.4rem; text-align:center;
  font:800 .64rem/1.8 var(--font-body); letter-spacing:.26em; text-transform:uppercase;
  color:var(--dim);
}
.foot a{ text-decoration:none }

/* ── il documento: la prosa vera ───────────────────────────── */
.prose h1{ text-align:left }
.prose h1::before{ display:none }
.prose h2{ margin-top:2rem }
.prose ul, .prose ol{ padding-left:1.4rem; color:oklch(86% .03 285) }
.prose li + li{ margin-top:.4rem }
.prose table{ border-collapse:collapse; width:100%; margin:1.4rem 0 }
.prose th, .prose td{ border:1px solid oklch(80% .14 88 / .3); padding:.6em .8em; text-align:left }
.prose th{ color:var(--gold); font-family:var(--font-display); text-transform:uppercase; font-size:.85rem }
.wide{ overflow-x:auto }

@media (min-width:760px){
  .hud{ padding:.8rem 1.6rem }
  main{ max-width:700px; margin:0 auto; width:100%; gap:2.8rem; padding:2rem 0 4rem }
  .slab{ padding:2.3rem 2.4rem }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}

/* ─── LA SCHEDA ────────────────────────────────────────────────────────────
   Coppie etichetta/valore. La riga e' larga e distanziata: al tavolo si legge
   con la coda dell'occhio mentre si parla, non ci si mette a studiare. */
.sheet{ display:grid; gap:.1rem; margin:1rem 0 }
.sheet .row{
  display:grid; grid-template-columns:minmax(7rem,10rem) 1fr; gap:1rem;
  padding:.6rem .2rem; border-bottom:1px solid oklch(80% .14 88 / .13);
}
.sheet .row:last-child{ border-bottom:0 }
.sheet dt{
  font:600 .78rem/1.5 var(--font-display); letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); padding-top:.15rem;
}
.sheet dd{ color:var(--bone) }

/* la riga della tenuta: e' il numero che si guarda piu' spesso di ogni altro */
.tenuta{
  font:700 1.5rem/1.3 var(--font-display); color:var(--gold);
  letter-spacing:.04em; margin:.3rem 0 .9rem;
}
.tenuta b{ font-size:2.1rem; color:var(--crim); text-shadow:0 0 18px oklch(58% .22 28 / .5) }

/* i due bottoni: grossi, perche' si premono col pollice mentre si tiene in mano altro */
.conta{ display:flex; gap:.8rem }
.conta button{
  flex:1; max-width:9rem; min-height:3.4rem;
  font:700 1.8rem/1 var(--font-display);
  color:var(--bone); background:linear-gradient(168deg, var(--hall), var(--deep));
  border:1px solid oklch(80% .14 88 / .45); cursor:pointer;
  transition:border-color .15s, color .15s, transform .08s;
}
.conta button:hover{ color:var(--gold); border-color:var(--gold) }
.conta button:active{ transform:translateY(1px) }

/* ─── IL MAZZO ─────────────────────────────────────────────────────────────
   Fantasia arancione/grigio uguale per tutte: il colore per personaggio arriva
   dopo, e comunque non dovra' mai dire nulla di dove viene la carta. */
.deck{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem; margin-top:1rem }
.card{
  position:relative; padding:1.1rem 1rem 1.2rem;
  background:linear-gradient(158deg, oklch(38% .04 60), oklch(26% .02 60) 85%);
  border:1px solid oklch(68% .13 55 / .5);
  box-shadow:0 10px 26px oklch(8% .03 280 / .6), inset 0 1px 0 oklch(68% .13 55 / .25);
}
/* la banda in alto: la stessa per tutte, ed e' voluto */
.card::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg, oklch(68% .13 55), oklch(55% .02 60));
}
.card h3{
  font:700 1.05rem/1.3 var(--font-display); letter-spacing:.05em;
  color:oklch(82% .11 60); margin-bottom:.4rem;
}
.card p{ font-size:.95rem; color:oklch(84% .015 60) }
.card-data{ list-style:none; margin-top:.8rem; display:grid; gap:.25rem }
.card-data li{
  font-size:.82rem; color:oklch(78% .02 60);
  display:flex; gap:.5rem; justify-content:space-between;
  border-top:1px solid oklch(68% .13 55 / .18); padding-top:.25rem;
}
.card-data span{
  font:600 .7rem/1.6 var(--font-display); letter-spacing:.1em; text-transform:uppercase;
  color:oklch(62% .06 60);
}

/* ─── LA PRIMA PAGINA ──────────────────────────────────────────────────────
   Presa da `_design/saga.html`: se quel prototipo cambia, questo lo segue.
   ⚠️ `.party .card` e `.deck .card` sono due cose diverse e restano separate
   dal contenitore: i ritratti non sono le carte del mazzo. */
.hero{ position:relative; height:92svh; min-height:520px; display:grid; align-content:end; overflow:hidden; isolation:isolate }
.hero__bg{ position:absolute; inset:-12% 0; z-index:-2; will-change:transform }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
  filter:saturate(2.1) contrast(1.35) brightness(.72) hue-rotate(-28deg); /* i draghi si accendono */
}
.hero__glow{
  position:absolute; inset:-12% 0; z-index:-1; mix-blend-mode:screen; will-change:transform;
  background:
    radial-gradient(50% 38% at 24% 30%, oklch(70% .14 230 / .35), transparent 70%),
    radial-gradient(55% 40% at 80% 24%, oklch(80% .14 88 / .3), transparent 70%);
}
.hero::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, oklch(17% .05 280 / .85), oklch(17% .05 280 / .25) 40%, transparent 58%, var(--void) 97%) }
.hero__plate{ position:relative; z-index:1; padding:0 1.15rem 4.6rem; text-align:center; will-change:transform,opacity }
.hero__kicker{
  display:inline-block; margin-bottom:1.2rem; padding:.55em 1.2em;
  font:800 .68rem/1 var(--font-body); letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); border-top:2px solid var(--gold); border-bottom:2px solid var(--gold);
  text-shadow:0 0 16px oklch(80% .14 88 / .6);
}
.hero__title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.6rem, 12.5vw, 6rem); line-height:1.06; text-transform:uppercase;
  color:var(--bone);
  text-shadow:
    0 .04em 0 var(--gold-deep),
    0 .12em .35em oklch(8% .03 280 / .9),
    0 0 1em oklch(80% .14 88 / .4);
}
.hero__title em{ font-style:normal; color:var(--crim); text-shadow:0 .04em 0 oklch(35% .12 28), 0 .12em .35em oklch(8% .03 280 / .9), 0 0 1em oklch(58% .22 28 / .6) }
.hero__title::before,.hero__title::after{
  content:""; display:block; height:2px; width:min(300px, 60%); margin:1.1rem auto;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero__sub{ margin:0 auto; max-width:36ch; color:var(--dim); font-style:italic; font-size:1.05rem }
.hero__cue{ position:absolute; left:50%; bottom:1.1rem; z-index:1; translate:-50% 0; width:24px; height:24px; border-right:3px solid var(--gold); border-bottom:3px solid var(--gold); rotate:45deg; filter:drop-shadow(0 0 6px var(--gold)); animation:cue 2s ease-in-out infinite }
@keyframes cue{ 50%{ transform:translateY(8px); opacity:.5 } }

.slabwrap:nth-of-type(odd){ transform:rotate(.4deg) }
.slabwrap:nth-of-type(even){ transform:rotate(-.4deg) }
.cut{ position:relative; width:100vw; margin-left:calc(50% - 50vw); height:50svh; min-height:310px; border-top:2px solid var(--gold); border-bottom:2px solid var(--gold) }
.cut img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.5) contrast(1.15) brightness(.95) }
.cut--b img{ filter:saturate(1.35) contrast(1.12) brightness(1) sepia(.15) }
.cut figcaption{
  position:absolute; left:50%; bottom:1.2rem; translate:-50% 0; z-index:2;
  padding:.6em 1.4em; font:800 .68rem/1 var(--font-body); letter-spacing:.24em; text-transform:uppercase;
  color:var(--void); background:var(--gold);
  clip-path:polygon(.8em 0, calc(100% - .8em) 0, 100% 100%, 0 100%);
  box-shadow:0 0 26px oklch(80% .14 88 / .6);
}

.party{ display:flex; gap:1.1rem; overflow-x:auto; padding:1.3rem .2rem 1.7rem; scroll-snap-type:x mandatory }
.cta{ padding:3.4rem 1.1rem 4.6rem; display:grid; justify-items:center; gap:1.1rem; text-align:center }
.cta button{
  font:700 1.05rem/1 var(--font-display); text-transform:uppercase; letter-spacing:.1em;
  color:var(--void); background:linear-gradient(180deg, var(--gold), var(--gold-deep));
  padding:1.2em 2.6em; border:0; cursor:pointer;
  clip-path:polygon(1em 0, calc(100% - 1em) 0, 100% 50%, calc(100% - 1em) 100%, 1em 100%, 0 50%);
  box-shadow:0 0 40px oklch(80% .14 88 / .5);
  transition:transform .12s ease-out, box-shadow .12s ease-out;
}
.cta button:hover{ box-shadow:0 0 60px oklch(80% .14 88 / .8) }
.cta button:active{ transform:scale(.96) }
.cta button.registered{ background:linear-gradient(180deg, var(--crim), oklch(42% .16 28)); color:var(--bone) }
.cta small{ color:var(--dim); font-size:.8rem; font-style:italic }
.rv{ opacity:0; translate:0 24px; transition:opacity .75s cubic-bezier(.16,1,.3,1), translate .75s cubic-bezier(.16,1,.3,1) }
.rv.in{ opacity:1; translate:0 0 }

/* le due @media erano andate perse nel porting dal prototipo: i loro corpi finivano sciolti,
   applicati a ogni schermo, con una graffa orfana — e la griglia da desktop schiacciava il mobile */
@media (min-width:760px){
  .hero__plate{ padding:0 2.5rem 5.4rem }
  .cut{ height:58svh }
  .party{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible }
}
@media (prefers-reduced-motion:reduce){
  .hero__cue{ animation:none }
  .rv{ opacity:1; translate:none; transition:none }
}
/* ─── LA SOGLIA ────────────────────────────────────────────────────────────
   La landing non ha testo: logo, sfondo, una porta. Chi arriva o entra o se ne
   va, e le parole cominciano dopo l'ingresso — anche nella fiction. */
.soglia{
  position:relative; min-height:calc(100svh - 8rem);
  display:grid; place-content:center; text-align:center;
  overflow:hidden; isolation:isolate;
}
.soglia__bg{ position:absolute; inset:-6%; z-index:-2 }
.soglia__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:saturate(1.25) contrast(1.1) brightness(.5);
}
.soglia::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 55% at 50% 45%, transparent, oklch(17% .05 280 / .92) 78%);
}
.soglia__plate{ display:grid; gap:2.6rem; justify-items:center; padding:2rem 1.2rem }
.soglia__plate button{
  font:700 1rem/1 var(--font-display); letter-spacing:.22em; text-transform:uppercase;
  color:var(--void); background:linear-gradient(180deg, var(--gold), var(--gold-deep));
  border:0; padding:1.15rem 3.4rem; cursor:pointer;
  box-shadow:0 0 40px oklch(80% .14 88 / .45);
  transition:box-shadow .2s, transform .08s;
}
.soglia__plate button:hover{ box-shadow:0 0 64px oklch(80% .14 88 / .8) }
.soglia__plate button:active{ transform:scale(.97) }

/* ─── LE CAMPAGNE ──────────────────────────────────────────────────────────
   Un riquadro per campagna, con l'immagine: si riconosce a colpo d'occhio quale
   tavolo si sta aprendo, che e' l'unica cosa che serve in questa pagina. */
.tavoli{ display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:1.4rem; margin:1.4rem 0 }
.tavolo{
  position:relative; display:block; overflow:hidden; text-decoration:none;
  border:1px solid oklch(80% .14 88 / .4); background:var(--deep);
  transition:border-color .2s, transform .12s;
}
.tavolo:hover{ border-color:var(--gold); transform:translateY(-3px) }
.tavolo img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:saturate(1.2) brightness(.72) }
.tavolo__testo{ padding:1rem 1.1rem 1.2rem }
.tavolo__testo h3{ font:700 1.15rem/1.3 var(--font-display); color:var(--gold); letter-spacing:.03em }
.tavolo__testo p{ font-size:.86rem; color:var(--dim); margin-top:.2rem }

/* la porta della biblioteca: piu' larga, e sta da sola */
.porta{
  display:block; text-decoration:none; margin-top:2rem;
  border:1px solid oklch(70% .14 230 / .45); background:linear-gradient(168deg, var(--hall), var(--deep));
  padding:1.7rem 1.4rem; transition:border-color .2s;
}
.porta:hover{ border-color:var(--azure) }
.porta h3{ font:700 1.3rem/1.3 var(--font-display); color:var(--azure); letter-spacing:.04em }
.porta p{ color:var(--dim); font-size:.92rem; margin-top:.3rem }

/* la riga di stampa: versione e data in coda a una pagina. Discreta perche' non e' contenuto —
   ma c'e', perche' chi legge una regola vuole sapere se sta leggendo quella di ieri. */
.stampa{
  margin-top:2.4rem; padding-top:.9rem;
  border-top:1px solid oklch(80% .14 88 / .18);
  font:400 .78rem/1.6 var(--font-display); letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); opacity:.75;
}
.stampa span{ opacity:.7 }