/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  background: #faf7f1;
}
a { color: inherit; text-decoration: none; }

/* ---- Topbar ---- */
.topbar {
  border-bottom: 1px solid #e7e1d4;
  background: #faf7f1;
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 22px; letter-spacing: 0.02em;
}
.brand span { color: #b89a55; padding: 0 4px; }
.topbar nav { display: flex; gap: 28px; }
.topbar nav a {
  font-size: 14px; color: #555; padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.topbar nav a.active { color: #1a1a1a; border-bottom-color: #1a1a1a; }
.topbar nav a:hover { color: #1a1a1a; }

/* ---- Hero ---- */
main { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.hero { padding: 48px 0 16px; }
.hero h1 {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: #111;
}

/* ---- Banner ---- */
.banner { margin: 22px 0 36px; }
.banner-img {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 4px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6e/Ceiling_of_Palazzo_Barberini.jpg");
}
.banner-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
}
.banner-caption {
  position: relative; z-index: 1;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 18px 22px;
}

/* ---- Lede / descrizione ---- */
.lede {
  padding: 6px 0 56px;
  border-bottom: 1px solid #e7e1d4;
  margin-bottom: 56px;
}
.lede p {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 17px; line-height: 1.6; color: #2a2a2a;
  margin: 0 0 14px;
}
.lede p:last-child { margin-bottom: 0; }

/* ---- Section heading ---- */
.section { padding: 12px 0 56px; }
.section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 24px; }
.section-head h2 {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-weight: 500; font-size: 32px; margin: 0;
}
.section-sub { color: #6e6960; font-size: 14px; margin: 0; }

/* ---- Storie section: container beige ---- */
.storie-section {
  position: relative;
  padding: 0;
  margin: 0 calc(50% - 50vw) 56px;
  background: #f3ecdb;
  border-top: 1px solid #e7e1d4;
  border-bottom: 1px solid #e7e1d4;
}
.storie-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 28px 40px;
}
.storie-section .carousel { padding-bottom: 4px; }

.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.carousel-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid #d8d2c2;
  background: #faf7f1;
  color: #1a1a1a;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.carousel-btn:hover { background: #1a1a1a; color: #faf7f1; border-color: #1a1a1a; }
.carousel-btn:active { transform: scale(0.96); }

/* ---- Carosello storie ---- */
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  margin: 0 -4px;
}
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-thumb { background: #d8d2c2; border-radius: 8px; }
.story-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.story-card:hover { transform: translateY(-3px); }
.story-img {
  width: 100%;
  height: 400px;
  border-radius: 4px;
  margin-bottom: 14px;
  background: #ddd;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.story-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}
.story-cta {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #1d6fed;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, background 0.18s ease;
  z-index: 2;
}
.story-card:hover .story-cta { transform: translate(2px, -2px); background: #2380ff; }
.story-card h3 {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-weight: 500; font-size: 22px;
  margin: 0 0 4px;
  line-height: 1.2;
}
.story-meta { font-size: 13px; color: #6e6960; margin: 0; letter-spacing: 0.02em; }

/* Immagini storie reali */
.story-img[data-key="barberini"]   { background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c4/Gianlorenzo_bernini%2C_busto_di_urbano_VIII_01.JPG"); background-position: center top; }
.story-img[data-key="caravaggio"]  { background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/29/Narcissus-Caravaggio_%281594-96%29_edited.jpg"); }
.story-img[data-key="potere"]      { background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/8d/Raffaello_Sanzio_-_La_Fornarina_%28ca._1519-1520%29.jpg"); }
.story-img[data-key="mistici"]     { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Guido_Reni_-_The_Penitent_Magdalene_-_Google_Art_Project.jpg"); }
.story-img[data-key="stranieri"]   { background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/7f/Retrato_del_Papa_Inocencio_X._Roma%2C_by_Diego_Vel%C3%A1zquez.jpg"); background-position: center top; }

/* ---- Beni — masonry / pinterest (CSS columns) ---- */
.grid {
  column-count: 4;
  column-gap: 48px;
}
@media (max-width: 1100px) { .grid { column-count: 3; column-gap: 40px; } }
@media (max-width: 720px)  { .grid { column-count: 2; column-gap: 32px; } }
@media (max-width: 460px)  { .grid { column-count: 1; } }

.tile {
  display: block;
  break-inside: avoid;
  margin-bottom: 44px;
  padding-bottom: 22px;
  border-bottom: 1px solid #ece6d6;
  background: transparent;
  border-radius: 0;
}
.tile:hover .tile-title { color: #000; text-decoration: underline; text-decoration-color: #c9a23a; text-underline-offset: 4px; }

.tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  margin-bottom: 12px;
  background: #d8d2c2;
}
.tile.tile-tall .tile-img    { aspect-ratio: 3 / 4; }
.tile.tile-xtall .tile-img   { aspect-ratio: 2 / 3; }
.tile.tile-short .tile-img   { aspect-ratio: 4 / 3; }

.tile-text { padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tile-num { font-size: 11px; color: #b89a55; letter-spacing: 0.18em; }
.tile-title {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 17px; line-height: 1.25; color: #1a1a1a;
}
.tile-sub { font-size: 12px; color: #6e6960; }

/* Tile — immagini reali */
.tile-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #d8d2c2;
}
.tile-img[data-img="01"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/7f/Lippi_Madonna_Tarquinia.jpg"); }
.tile-img[data-img="03"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/8d/Raffaello_Sanzio_-_La_Fornarina_%28ca._1519-1520%29.jpg"); background-position: center top; }
.tile-img[data-img="04"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/f9/After_Hans_Holbein_the_Younger_-_Portrait_of_Henry_VIII_-_Google_Art_Project.jpg"); background-position: center top; }
.tile-img[data-img="05"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Lorenzo_Lotto_023.jpg"); }
.tile-img[data-img="06"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Tizian_065.jpg"); }
.tile-img[data-img="07"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Angelo_Bronzino_021.jpg"); background-position: center top; }
.tile-img[data-img="08"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/LFontana.jpg"); background-position: center top; }
.tile-img[data-img="09"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/29/Narcissus-Caravaggio_%281594-96%29_edited.jpg"); }
.tile-img[data-img="10"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Judith_Beheading_Holofernes-Caravaggio_(c.1598-9).jpg"); }
.tile-img[data-img="11"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Saint_Francis_in_Prayer-Caravaggio_(c.1606).jpg"); }
.tile-img[data-img="12"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/63/01_Portret_Beatrice_Cenci.jpg"); background-position: center top; }
.tile-img[data-img="13"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Guido_Reni_-_The_Penitent_Magdalene_-_Google_Art_Project.jpg"); background-position: center top; }
.tile-img[data-img="14"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6e/Ceiling_of_Palazzo_Barberini.jpg"); }
.tile-img[data-img="15"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c4/Trionfo_della_Divina_Sapienza_di_Andrea_Sacchi_in_palazzo_Barberini%2C_Roma_1629-33.jpg"); }
.tile-img[data-img="16"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c4/Gianlorenzo_bernini%2C_busto_di_urbano_VIII_01.JPG"); background-position: center top; }
.tile-img[data-img="18"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Guercino_Et_in_Arcadia_ego.jpg"); }
.tile-img[data-img="19"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/ae/Boy_with_a_Basket_of_Fruit_by_Caravaggio.jpg"); }
.tile-img[data-img="21"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/ff/Madonna_and_Child_with_St._Anne-Caravaggio_%28c._1605-6%29.jpg"); }
.tile-img[data-img="22"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Apollo_and_Daphne_(Bernini)_(cropped).jpg"); background-position: center top; }
.tile-img[data-img="23"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Tizian_013.jpg"); }
.tile-img[data-img="24"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/7f/Retrato_del_Papa_Inocencio_X._Roma%2C_by_Diego_Vel%C3%A1zquez.jpg"); background-position: center top; }
.tile-img[data-img="25"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Penitent_Magdalene-Caravaggio_(1594-6).jpg"); }
.tile-img[data-img="26"] { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Rest_on_the_Flight_into_Egypt-Caravaggio_(c.1597).jpg"); }
.tile-img[data-img="27"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/57/Madonna_di_Loreto-Caravaggio_%28c.1604-6%29.jpg"); }
.tile-img[data-img="28"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/59/Caravaggio_%E2%80%94_The_Calling_of_Saint_Matthew.jpg"); }
.tile-img[data-img="29"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/bb/Caravaggio_%E2%80%94_The_Martyrdom_of_Saint_Matthew.jpg"); }

/* ---- Pagina storia (dark) ---- */
body.story { background: #0d0d0d; color: #e8e1cf; }
body.story .topbar { background: #0d0d0d; border-bottom-color: #1f1f1f; }
body.story .topbar nav a { color: #b8b09c; }
body.story .topbar nav a:hover { color: #fff; }
body.story .brand { color: #e8e1cf; }
body.story .brand span { color: #c9a23a; }

.story-page { max-width: 1100px; margin: 0 auto; padding: 56px 28px 80px; }
.story-back {
  display: inline-block;
  font-size: 13px; letter-spacing: 0.06em;
  color: #b8b09c;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.story-back:hover { color: #fff; }
.story-page h1 {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  margin: 0 0 4px;
  color: #f3ecdb;
}
.story-page .story-period {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #8a8270;
  margin: 0 0 28px;
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 760px) {
  .story-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Hero opera principale = slider */
.story-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.story-page .hero-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: #1a1a1a;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hero-img-title {
  margin: 14px 0 12px;
  font-size: 12px;
  color: #b8b09c;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.4;
  min-height: 32px;
}
.hero-img-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.hero-img-controls .slider-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #d8d2c2;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.hero-img-controls .slider-btn:hover { background: #d8d2c2; color: #0d0d0d; }

.story-body p {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  color: #d8d2c2;
  margin: 0 0 18px;
}


body.story footer { border-top-color: #1f1f1f; }
body.story .footer-inner { color: #8a8270; }

/* ---- Footer ---- */
footer { border-top: 1px solid #e7e1d4; margin-top: 40px; }
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 22px 28px;
  display: flex; justify-content: space-between;
  font-size: 12px; color: #6e6960;
}
@media (max-width: 600px) {
  .footer-inner { flex-direction: column; gap: 6px; }
}