/* lucapetti.com — unico foglio di stile */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --ink: #111; --mut: #777; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 15px; line-height: 1.6;
  color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
b, strong { font-weight: 500; }
img { max-width: 100%; height: auto; display: block; }

.sitename { font-size: 15px; font-weight: 500; letter-spacing: .01em; }
.nav a { display: block; font-size: 14px; line-height: 2.1; }
.nav a.active { text-decoration: underline; text-underline-offset: 3px; }

/* layout con sidebar (tutte le pagine tranne home) */
.side { position: fixed; top: 0; left: 0; width: 220px; padding: 44px 36px; }
.side .sitename { display: block; margin-bottom: 30px; }
.mbtn { display: none; }
.main { margin-left: 220px; padding: 44px 56px 96px; max-width: 900px; }

/* home full-bleed, nessuno scroll */
body.home { height: 100dvh; overflow: hidden; }
body.home .hero-link img {
  position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.home-ovl { position: fixed; top: 44px; left: 48px; }
.home-ovl .sitename { display: block; margin-bottom: 26px; }
.home-caption {
  position: fixed; left: 48px; bottom: 30px; font-size: 12px; color: #444;
  max-width: 60ch;
}
/* alone chiaro (tonalità dello sfondo della foto, non bianco puro): mantiene
   leggibile il testo overlay anche sulle zone scure del crop full-bleed */
.home-ovl, .home-caption {
  text-shadow: 0 0 3px #ccc, 0 0 6px #ccc, 0 0 10px #ccc, 0 0 10px #ccc;
}

/* work index */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.cell .cap { display: block; font-size: 12px; margin-top: 8px; line-height: 1.5; color: var(--ink); }
.cell .cap span { display: block; color: var(--mut); }
.cell img { width: 100%; aspect-ratio: 4/3.4; object-fit: contain; }

/* pagina progetto */
.ptitle { font-size: 17px; font-weight: 500; }
.pmeta { font-size: 12.5px; color: var(--mut); margin: 2px 0 26px; }
.ptext { font-size: 14px; color: #2a2a2a; }
.ptext p + p { margin-top: 1em; }
.psource { font-size: 12px; color: var(--mut); margin: 12px 0 44px; }
figure { margin: 0 0 52px; }
figcaption { font-size: 12px; color: var(--mut); margin-top: 9px; line-height: 1.55; }

/* liste (news, texts) */
.entry { margin-bottom: 30px; font-size: 14px; }
.entry .label { display: block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.entry .src { display: block; font-size: 12px; color: var(--mut); margin-top: 6px; }

/* about / cv / contact */
.bio { font-size: 14px; margin-bottom: 44px; }
.cv h2 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; color: var(--mut); margin: 36px 0 10px; }
.cv ul { list-style: none; }
.cv li { font-size: 13.5px; margin-bottom: 6px; max-width: 70ch; }
.cv .y { color: var(--mut); display: inline-block; min-width: 46px; }
.dl { font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.contact p { font-size: 14px; margin-bottom: 8px; }

/* fade-in immagini */
@media (prefers-reduced-motion: no-preference) {
  main img, .hero-link img { animation: fade .4s ease-out; }
  @keyframes fade { from { opacity: 0; } }
}

/* mobile */
@media (max-width: 760px) {
  /* topbar fissa in vetro smerigliato (stile Apple) su tutte le pagine */
  .side, .home-ovl {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; padding: 14px 20px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: .5px solid rgba(0, 0, 0, .12);
    text-shadow: none;
  }
  .side { width: auto; }
  .side .sitename, .home-ovl .sitename { margin: 0; }
  .mbtn { display: block; background: none; border: 0; font: inherit;
    font-size: 13px; cursor: pointer; }
  .side .nav, .home-ovl .nav { display: none; width: 100%; padding-top: 12px; }
  body.nav-open .side .nav, body.nav-open .home-ovl .nav { display: block; }
  .main { margin: 0; padding: 74px 20px 64px; }
  .grid { grid-template-columns: 1fr; }
  .home-caption { left: 20px; bottom: 18px; right: 20px; }
}