/* ===== Impostazioni facili da cambiare ===== */
:root {
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-size: 13px;
  --text: #111;
  --bg: #fff;
  --sidebar-width: 25.5vw;   /* larghezza colonna sinistra */
  --gap: 12px;               /* spazio tra le immagini */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg); color: var(--text); }

body {
  font-family: var(--font);
  font-size: var(--text-size);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.5; }

ul { list-style: none; }

/* ===== Colonna sinistra (fissa) ===== */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  padding: 8px 8px 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.name {
  font-size: var(--text-size);
  font-weight: 400;
  margin-bottom: 38px;
}

.sidebar section { margin-bottom: 38px; }

.title {
  font-size: calc(var(--text-size) * 1.15);
  font-weight: 400;
  margin-bottom: 20px;
}
.title.underline { text-decoration: underline; text-underline-offset: 2px; }

.footer { margin-top: auto; }

/* ===== Immagini a destra ===== */
.gallery {
  margin-left: var(--sidebar-width);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: 6px 0 0 0;
}

.gallery figure { overflow: hidden; }
.gallery .full { grid-column: 1 / -1; }

.gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery .half img { aspect-ratio: 5 / 4; }
.gallery .full img { aspect-ratio: 16 / 9; object-position: center top; }

/* ===== Telefono: tutto in colonna ===== */
@media (max-width: 800px) {
  .sidebar {
    position: static;
    width: 100%;
    overflow: visible;
  }
  .footer { margin-top: 0; }
  .gallery {
    margin-left: 0;
    grid-template-columns: 1fr;
  }
  .gallery .full { grid-column: auto; }
}