:root {
  --navy: #001040;
  --blue: #002080;
  --ink: #26323a;
  --muted: #5a6772;
  --line: #d3dadc;
  --soft: #f3f6f8;
  --max: 62rem;

  /* Pattern sottili, tutti in CSS/SVG inline */
  --pat-dots-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23002080' fill-opacity='.12'/%3E%3C/svg%3E");
  --pat-dots-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E");
  --pat-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%23002080' stroke-opacity='.045'/%3E%3C/svg%3E");
  --pat-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M-2 2l4-4M0 16L16 0M14 18l4-4' stroke='%23002080' stroke-opacity='.05'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff var(--pat-grid);
  font: 1.0625rem/1.65 "Roboto Condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: #fff;
}

h1, h2, h3, .brand, nav a {
  font-family: Quicksand, "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
}

img { max-width: 100%; height: auto; }
a { color: var(--blue); }
a:hover { color: var(--navy); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  max-width: 75rem;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
}
.brand {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: .01em;
}
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
nav a {
  display: block;
  padding: .35rem .1rem;
  color: #404040;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .9rem;
  border-bottom: 2px solid transparent;
}
nav a:hover, nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }

/* Hero (home) */
.hero {
  display: grid;
  place-items: center;
  min-height: 26rem;
  padding: 3rem 1.25rem;
  text-align: center;
  background-color: #e9eef6;
  background-image: var(--pat-dots-blue), linear-gradient(180deg, #f4f7fc, #dfe7f3);
}
.hero h1 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.25;
  color: var(--navy);
  text-shadow: 0 0 .6rem rgba(255, 255, 255, .8);
}
.hero h1 span { display: block; }

/* Layout */
main { display: block; }
.content { max-width: var(--max); margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.content h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); color: #37474f; text-transform: uppercase; margin: 0 0 1.5rem; line-height: 1.2; }
.content h2 { font-size: 1.5rem; color: var(--navy); margin: 2.5rem 0 .75rem; text-transform: uppercase; }
.content h3 { font-size: 1.2rem; color: var(--navy); margin: 2rem 0 .5rem; }
.content p { margin: 0 0 1rem; }
.content ul { padding-left: 1.4rem; margin: 0 0 1.25rem; }
.content li { margin-bottom: .35rem; }

/* Navy section (home) */
.band { background: var(--navy) var(--pat-dots-light); color: #fff; }
.band a { color: #9fd0ff; }
.band .content { text-align: center; }
.band .content p { text-align: left; }
.band h2 { color: #fff; text-align: center; margin-top: 0; }
.band h1, .band h2 { text-transform: none; }

.quote { margin: 2.5rem auto 0; font-style: italic; font-size: 1.2rem; max-width: 30rem; }
.quote p { text-align: center !important; margin: 0 0 .25rem; }
.quote cite { display: block; margin-top: 1rem; font-style: normal; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: #b6c4e6; }
.round-logo { width: 12rem; border-radius: 50%; margin-top: 2.5rem; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; margin: 2rem 0; padding: 0; list-style: none; }
.gallery li { margin: 0; }
.gallery a { display: block; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }

/* Partner logos */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.logos li { margin: 0; }
.logos img { display: block; height: 4.5rem; width: auto; max-width: 14rem; object-fit: contain; }
.logos.big img { height: 6.5rem; }

/* Figures / posters */
figure { margin: 1.5rem 0; text-align: center; }
figcaption { font-size: .95rem; color: var(--muted); margin-top: .4rem; }
.poster { box-shadow: 0 1px 6px rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.cards figure { flex: 1 1 18rem; max-width: 26rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* Contacts / roles */
dl.roles { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 1rem 0 2rem; }
dl.roles dt { font-weight: 700; color: var(--navy); }
dl.roles dd { margin: 0; }
address { font-style: normal; }

.pdf-frame { width: 100%; height: 40rem; border: 1px solid var(--line); }
.doc-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 0; list-style: none; }
.doc-links a { font-weight: 700; }

.qr { display: block; margin: 2rem auto 0; background: #fff; padding: .5rem; border-radius: 4px; }

/* Footer */
.site-footer { background: var(--soft) var(--pat-diag); border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
.site-footer .wrap { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--blue); }

@media (max-width: 40rem) {
  .brand { font-size: 1.5rem; }
  .site-header { position: static; }
  dl.roles { grid-template-columns: 1fr; gap: 0; }
  dl.roles dd { margin-bottom: .6rem; }
  .pdf-frame { height: 28rem; }
}

@media print {
  .site-header, .site-footer .fb, .pdf-frame, .gallery { display: none; }
  body { font-size: 11pt; }
}

.content ul.gallery, .content ul.logos, .content ul.doc-links { padding-left: 0; }

dl.roles ul { margin: 0; padding-left: 1.1rem; }
dl.roles li { margin: 0; }