/* Stile comune a tutte le pagine */
:root {
  --nero: #000;
  --bianco: #fff;
  --grigio: #9a9a9a;
  --menu-h: 56px;
  --font: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--nero); color-scheme: dark; scroll-behavior: smooth; }
body {
  background: var(--nero);
  color: var(--bianco);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* MENU */
.logo { display: block; height: 30px; width: auto; }
.menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: calc(var(--menu-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 22px 0;
  background: var(--nero);
  display: flex; align-items: center; justify-content: space-between;
  text-transform: uppercase;
}
.nome {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  font-weight: 600; font-size: 16px; letter-spacing: 0.06em;
}
.voci { display: flex; gap: 30px; list-style: none; }
.voci a {
  color: var(--grigio); text-decoration: none;
  font-size: 15px; font-weight: 400; letter-spacing: 0.08em;
  transition: color .2s;
}
.voci a:hover, .voci a[aria-current="page"] { color: var(--bianco); }
.nome:focus-visible, .voci a:focus-visible { outline: 1px solid var(--bianco); outline-offset: 4px; }

.contenuto { padding-top: calc(var(--menu-h) + env(safe-area-inset-top, 0px)); }

/* PAGINE CENTRATE (lavoro, about) */
.colonna {
  max-width: 1100px; margin: 0 auto;
  padding: 64px 20px calc(48px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.su {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-top: 72px;
  border: 1px solid var(--grigio); border-radius: 50%;
  background: none; color: var(--bianco); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.su:hover { border-color: var(--bianco); background: #1a1a1a; }
.su:focus-visible { outline: 1px solid var(--bianco); outline-offset: 4px; }
.su svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  :root { --menu-h: 50px; }
  .menu { padding-left: 16px; padding-right: 16px; }
  .nome { font-size: 12px; letter-spacing: 0.04em; gap: 9px; }
  .logo { height: 20px; }
  .voci { gap: 18px; }
  .voci a { font-size: 13px; }
  .colonna { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}