/* ---- 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; /* avorio */
}
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;
}
.hero .meta { color: #6e6960; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.hero .meta span { padding: 0 6px; }
.hero .meta span:first-child { padding-left: 0; }

/* ---- 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: linear-gradient(135deg, #0a3d62 0%, #1e6091 35%, #c9a23a 100%);
}
.banner-img::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 28% 35%, rgba(255,255,255,0.18), transparent 26%),
    radial-gradient(circle at 72% 65%, rgba(255,255,255,0.10), transparent 32%);
}
.banner-caption {
  position: relative;
  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 {
  /* break out del max-width di main per estendere il fondo all'intera viewport */
  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; }

/* Controlli del carosello in basso a destra del container beige */
.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); }

/* ---- Carousel storie (rettangoli alti) ---- */
.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; /* rettangolo alto */
  border-radius: 4px;
  margin-bottom: 14px;
  background: #ddd;
  position: relative;
  overflow: hidden;
}
.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%);
}

/* CTA blu in alto a destra dentro il poster */
.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; /* sopra al gradient ::after */
}
.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; }

/* Story poster gradients (placeholder) */
.story-img[data-key="esilio"]    { background: linear-gradient(160deg, #2c2620 0%, #5a4c3a 60%, #b89a55 100%); }
.story-img[data-key="padri"]     { background: linear-gradient(160deg, #1d3557 0%, #457b9d 60%, #f1faee 100%); }
.story-img[data-key="andreotti"] { background: linear-gradient(160deg, #1a1a1a 0%, #3d3d3d 50%, #8a7440 100%); }
.story-img[data-key="giornale"]  { background: linear-gradient(160deg, #6b1e1e 0%, #9c4a3c 55%, #f5d28b 100%); }
.story-img[data-key="altra"]     { background: linear-gradient(160deg, #1b3a2f 0%, #3f6c4d 55%, #d4b35b 100%); }

/* ---- 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; /* divisore lieve */
  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;
}
/* Varianti di altezza per effetto masonry */
.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 placeholder palettes — variabili per dare un po' di varietà */
.tile-img[data-key="sturzo-1928"]   { background: linear-gradient(135deg, #4a3b22, #c9a23a); }
.tile-img[data-key="sturzo-1938"]   { background: linear-gradient(135deg, #2e2a22, #998563); }
.tile-img[data-key="sturzo-1946"]   { background: linear-gradient(135deg, #3b3322, #b59c5d); }
.tile-img[data-key="degasperi"]     { background: linear-gradient(135deg, #1d3557, #6e8eaf); }
.tile-img[data-key="carter"]        { background: linear-gradient(135deg, #243447, #97a8b9); }
.tile-img[data-key="pacciardi"]     { background: linear-gradient(135deg, #2a1f3d, #8e7ab8); }
.tile-img[data-key="giordani"]      { background: linear-gradient(135deg, #2c2c2c, #969696); }
.tile-img[data-key="serie-europa"]  { background: linear-gradient(135deg, #0a3d62, #c9a23a); }
.tile-img[data-key="serie-coop"]    { background: linear-gradient(135deg, #1e4d3a, #c9a23a); }
.tile-img[data-key="olp"]           { background: linear-gradient(135deg, #4d2c2c, #c8633c); }
.tile-img[data-key="corriere"]      { background: linear-gradient(135deg, #6e6960, #d8d2c2); }
.tile-img[data-key="sme"]           { background: linear-gradient(135deg, #3a3322, #c9a23a); }
.tile-img[data-key="rilancio"]      { background: linear-gradient(135deg, #1a3a5c, #b89a55); }
.tile-img[data-key="bruxelles"]     { background: linear-gradient(135deg, #102a55, #4a78b3); }
.tile-img[data-key="strasburgo"]    { background: linear-gradient(135deg, #1d3557, #a8dadc); }
.tile-img[data-key="sme-adesione"]  { background: linear-gradient(135deg, #355c47, #c4d3c2); }
.tile-img[data-key="milano85"]      { background: linear-gradient(135deg, #4a1c1c, #d4af37); }
.tile-img[data-key="maastricht"]    { background: linear-gradient(135deg, #0a2e4a, #d4af37); }
.tile-img[data-key="discorsi"]      { background: linear-gradient(135deg, #2c2c2c, #777); }
.tile-img[data-key="scritti"]       { background: linear-gradient(135deg, #1a1a1a, #888); }
.tile-img[data-key="gronchi-viaggi"]{ background: linear-gradient(135deg, #2e3b2e, #b3b886); }
.tile-img[data-key="gronchi-cee"]   { background: linear-gradient(135deg, #1d3557, #a8dadc); }
.tile-img[data-key="dc-direzione"]  { background: linear-gradient(135deg, #4d3a22, #d4b35b); }
.tile-img[data-key="manifesti"]     { background: linear-gradient(135deg, #6b1e1e, #f5d28b); }
.tile-img[data-key="spadolini-1984"]{ background: linear-gradient(135deg, #5a3d22, #c9a23a); }
.tile-img[data-key="terza-forza"]   { background: linear-gradient(135deg, #4a3b3b, #c9a23a); }
.tile-img[data-key="carlino"]       { background: linear-gradient(135deg, #6e1e1e, #d4af37); }
.tile-img[data-key="nuova-antologia"]{ background: linear-gradient(135deg, #3a2e1f, #c9a23a); }
.tile-img[data-key="senato"]        { background: linear-gradient(135deg, #2c1c1c, #8a3a3a); }
.tile-img[data-key="bbcc"]          { background: linear-gradient(135deg, #1c3a2c, #6c8b75); }
.tile-img[data-key="carteggio-spad"]{ background: linear-gradient(135deg, #3b3322, #b59c5d); }
.tile-img[data-key="algeri"]        { background: linear-gradient(135deg, #1c3a55, #d4af37); }
.tile-img[data-key="tpp"]           { background: linear-gradient(135deg, #1b3a2f, #d4b35b); }
.tile-img[data-key="filb-manifesti"]{ background: linear-gradient(135deg, #6b1e1e, #c9a23a); }
.tile-img[data-key="filb-av"]       { background: linear-gradient(135deg, #2c2c2c, #888); }
.tile-img[data-key="basso-foto"]    { background: linear-gradient(135deg, #1a1a1a, #aaa); }
.tile-img[data-key="basso-scritti"] { background: linear-gradient(135deg, #2a2c4a, #8a8db8); }
.tile-img[data-key="basso-sx"]      { background: linear-gradient(135deg, #4a1c1c, #c97a3c); }
.tile-img[data-key="defelice"]      { background: linear-gradient(135deg, #2c2618, #998565); }
.tile-img[data-key="spirito"]       { background: linear-gradient(135deg, #3a2c1c, #b59c5d); }
.tile-img[data-key="faber"]         { background: linear-gradient(135deg, #3a2c1c, #d4b35b); }
.tile-img[data-key="paterna"]       { background: linear-gradient(135deg, #2a3a2a, #b3b886); }
.tile-img[data-key="marconi"]       { background: linear-gradient(135deg, #1c2a3a, #6c8aaf); }
.tile-img[data-key="cern"]          { background: linear-gradient(135deg, #1c2a4a, #5a8ab3); }
.tile-img[data-key="ventotene"]     { background: linear-gradient(135deg, #0a3d62, #4a78b3); }

/* ---- 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; }
}

.story-page .hero-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* immagine quadrata */
  border-radius: 4px;
  background: #1a1a1a;
}
.story-page .hero-img[data-key="esilio"]    { background: linear-gradient(160deg, #2c2620 0%, #5a4c3a 60%, #b89a55 100%); }
.story-page .hero-img[data-key="padri"]     { background: linear-gradient(160deg, #1d3557 0%, #457b9d 60%, #f1faee 100%); }
.story-page .hero-img[data-key="andreotti"] { background: linear-gradient(160deg, #1a1a1a 0%, #3d3d3d 50%, #8a7440 100%); }
.story-page .hero-img[data-key="giornale"]  { background: linear-gradient(160deg, #6b1e1e 0%, #9c4a3c 55%, #f5d28b 100%); }
.story-page .hero-img[data-key="altra"]     { background: linear-gradient(160deg, #1b3a2f 0%, #3f6c4d 55%, #d4b35b 100%); }

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

.story-body h3 {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #8a8270;
  margin: 30px 0 12px;
  font-weight: 600;
}

.story-body .resource-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid #1f1f1f;
}
.story-body .resource-list li {
  padding: 12px 0;
  border-bottom: 1px solid #1f1f1f;
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px;
  color: #c8c0ad;
}
.story-body .resource-list a { color: #e8e1cf; }
.story-body .resource-list a:hover { color: #fff; text-decoration: underline; text-decoration-color: #c9a23a; }
.story-body .resource-list .num { font-size: 11px; color: #8a8270; letter-spacing: 0.18em; min-width: 26px; }

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

/* ---- IMMAGINI ---- */
/* Solo: banner principale + 5 storie trasversali (poster + hero pagina). Nient'altro. */

.banner-img,
.story-img,
.hero-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Banner principale: scansione del Manifesto di Ventotene */
.banner-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2e/Manifesto_di_Ventotene.jpg");
  background-position: center 30%;
}
.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 { z-index: 1; }

/* Poster storie nel carosello — cartine, oggetti, scene atmosferiche */
.story-img[data-key="esilio"]    { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Abraham_Ortelius_Map_of_Europe.jpg"); }
.story-img[data-key="padri"]     { background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/59/Bundesarchiv_Bild_183-45653-0001%2C_Rom%2C_Vertr%C3%A4ge_%C3%BCber_Zollpakt_und_Eurotom_unterzeichnet.jpg"); }
.story-img[data-key="andreotti"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/3a/Giulio_Andreotti%2C_ca_1979.jpg"); background-position: center top; }
.story-img[data-key="giornale"]  { background-image: url("https://images2.corriereobjects.it/methode_image/2017/02/24/Tablet%20Edition/Foto%20-%20Trattate/Euratom-kaAE--544x408@Corriere-Tablet_320x240_M.JPG?v=201702261645"); }
.story-img[data-key="altra"]     { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/ESA_Headquarters_in_Paris.jpg"); }

/* Pagina storia — immagine quadrata grande (stessi soggetti) */
.story-page .hero-img[data-key="esilio"]    { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Abraham_Ortelius_Map_of_Europe.jpg"); }
.story-page .hero-img[data-key="padri"]     { background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/59/Bundesarchiv_Bild_183-45653-0001%2C_Rom%2C_Vertr%C3%A4ge_%C3%BCber_Zollpakt_und_Eurotom_unterzeichnet.jpg"); }
.story-page .hero-img[data-key="andreotti"] { background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/3a/Giulio_Andreotti%2C_ca_1979.jpg"); background-position: center top; }
.story-page .hero-img[data-key="giornale"]  { background-image: url("https://images2.corriereobjects.it/methode_image/2017/02/24/Tablet%20Edition/Foto%20-%20Trattate/Euratom-kaAE--544x408@Corriere-Tablet_320x240_M.JPG?v=201702261645"); }
.story-page .hero-img[data-key="altra"]     { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/ESA_Headquarters_in_Paris.jpg"); }

/* ---- 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; }
}