.storia-banner {
  background: var(--nebbia);
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--grano);
  min-height: 260px;
  display: flex; align-items: center;
}

.storia-banner-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(26,58,74,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,58,74,0.04) 1px, transparent 1px);
  background-size: 55px 55px;
}

.storia-banner-anno {
  position: absolute; right: -1rem; top: 50%;
  transform: translateY(-50%);
  font-family: 'Playfair Display', serif;
  font-size: clamp(8rem, 18vw, 16rem); font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(74,155,181,0.25); /* ← era 0.1, ora 0.25 */
  line-height: 1; 
  pointer-events: none; 
  user-select: none;
  margin-right: 2px;
}

.storia-banner-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--acqua-m);
  margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.8rem;
}

.storia-banner-tag::before {
  content: ''; width: 24px; height: 1px;
  background: var(--acqua-m);
}

.storia-banner-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700; color: var(--acqua);
  line-height: 1.05; margin-bottom: 0.8rem;
}

.storia-banner-title em {
  font-style: italic; color: var(--salvia);
}

.storia-banner-desc {
  font-size: 0.95rem; font-weight: 300;
  color: #666; line-height: 1.8; max-width: 480px;
}
.storia-intro { background: #fff; border-bottom: 1px solid var(--pietra); }
.storia-intro-testo { font-size: 1.05rem; font-weight: 300; color: #444; line-height: 1.95; }
.storia-intro-testo em { font-style: italic; color: var(--acqua); font-weight: 400; }
.storia-citazione {
border-left: 4px solid var(--grano); padding: 1.2rem 1.8rem;
background: var(--nebbia); border-radius: 0 4px 4px 0;
font-family: 'Playfair Display', serif; font-style: italic;
font-size: 1.1rem; color: var(--acqua); line-height: 1.7; margin: 2rem 0;
}
.beata-section { background: var(--acqua); position: relative; overflow: hidden; }
.beata-section-grid {
position: absolute; inset: 0;
background-image:
    linear-gradient(rgba(74,155,181,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,155,181,0.06) 1px, transparent 1px);
background-size: 55px 55px;
}
.beata-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(168,216,232,0.15);
border-top: 3px solid var(--grano);
padding: 2rem; border-radius: 4px;
}
.beata-anni { font-family:'Space Mono',monospace; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--grano); margin-bottom:0.5rem; }
.beata-nome { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:700; color:#fff; margin-bottom:0.3rem; }
.beata-titolo { font-family:'Space Mono',monospace; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--acqua-m); margin-bottom:1.5rem; }
.beata-testo { font-size:0.95rem; font-weight:300; color:var(--acqua-l); line-height:1.9; }
.timeline-section { background: var(--nebbia); }
.timeline { position: relative; padding: 1rem 0; }
.timeline::before {
content:''; position:absolute; left:50%; transform:translateX(-50%);
top:0; bottom:0; width:2px;
background: linear-gradient(to bottom, var(--grano), var(--acqua-m), var(--salvia));
}
.timeline-item {
display:flex; justify-content:flex-end;
padding-right:calc(50% + 2.5rem); margin-bottom:3rem; position:relative;
}
.timeline-item.right { justify-content:flex-start; padding-right:0; padding-left:calc(50% + 2.5rem); }
.timeline-dot {
position:absolute; left:50%; transform:translateX(-50%);
width:14px; height:14px; border-radius:50%;
background:var(--grano); border:3px solid var(--nebbia);
box-shadow:0 0 0 2px var(--grano); top:0.5rem; z-index:2;
}
.timeline-dot.acqua { background:var(--acqua-m); box-shadow:0 0 0 2px var(--acqua-m); }
.timeline-dot.salvia { background:var(--salvia); box-shadow:0 0 0 2px var(--salvia); }
.timeline-content {
background:#fff; border-radius:4px; padding:1.2rem 1.5rem;
box-shadow:0 2px 12px rgba(0,0,0,0.06); max-width:420px;
border-top:3px solid var(--grano);
}
.timeline-item.right .timeline-content { border-top-color:var(--acqua-m); }
.timeline-anno { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; color:var(--grano); line-height:1; margin-bottom:0.2rem; }
.timeline-item.right .timeline-anno { color:var(--acqua-m); }
.timeline-titolo { font-family:'Space Mono',monospace; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--acqua); margin-bottom:0.6rem; }
.timeline-testo { font-size:0.88rem; font-weight:300; color:#666; line-height:1.8; }
.mappa-section { background:var(--acqua); position:relative; overflow:hidden; }
.mappa-section-grid {
position:absolute; inset:0;
background-image:
    linear-gradient(rgba(74,155,181,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,155,181,0.06) 1px, transparent 1px);
background-size:55px 55px;
}
.mappa-wrapper {
  position: relative; z-index: 2;
  border: 2px solid rgba(212,168,67,0.3);
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.3s;
}

.mappa-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(10%) contrast(1.05);
}
.mappa-wrapper:hover { transform:scale(1.01); }

.mappa-caption { font-family:'Space Mono',monospace; font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--acqua-l); text-align:center; margin-top:1rem; }
.mappa-lightbox {
display:none; position:fixed; inset:0; z-index:9999;
background:rgba(0,0,0,0.92); align-items:center; justify-content:center; cursor:zoom-out;
}
.mappa-lightbox.aperta { display:flex; }
.mappa-lightbox img { max-width:95vw; max-height:90vh; object-fit:contain; border:1px solid rgba(212,168,67,0.2); }
.mappa-lightbox-close { position:absolute; top:1.5rem; right:1.5rem; color:#fff; font-size:2rem; cursor:pointer; opacity:0.7; transition:opacity 0.2s; background:none; border:none; }
.mappa-lightbox-close:hover { opacity:1; }
@media (max-width: 768px) {
.timeline::before { left:1.2rem; }
.timeline-item, .timeline-item.right { justify-content:flex-start; padding-left:3.5rem; padding-right:0; }
.timeline-dot { left:1.2rem; }
.timeline-content { max-width:100%; }
}