/* =========================================================================
   progetti.lorenzoruffino.it — stile condiviso (header in stile Substack)
   I token e tutte le classi sono prefissate con .site- per non entrare in
   conflitto con il CSS interno dei singoli progetti interattivi.
   ========================================================================= */
:root{
  --site-accent:#2563eb;       /* blu "Iscriviti" (theme_accent di Substack) */
  --site-accent-d:#1555e2;     /* hover                                       */
  --site-ink:#363737;          /* testo primario (print_on_header_bg)        */
  --site-muted:#757575;        /* testo secondario                           */
  --site-line:#e1e1e1;         /* bordi sottili (header_detail_color)        */
  --site-bg:#ffffff;           /* sfondo contenuto (web_bg_color)            */
  --site-header:#fafafa;       /* sfondo header grigino (header_bg_color)    */
  --site-card:#ffffff;
  --site-nav-h:80px;
  /* identica a Substack (font_family_body_preset) */
  --site-font: "SF Pro Display", -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.site{
  background:var(--site-bg);
  color:var(--site-ink);
  font-family:var(--site-font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.site a{color:inherit}

/* ---- barra di navigazione (sticky, stile Substack) -------------------- */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:var(--site-header);
  border-bottom:1px solid var(--site-line);
}
.site-nav__bar{
  width:100%;height:var(--site-nav-h);
  display:flex;align-items:center;gap:6px;padding:0 24px;
}
/* brand: solo il wordmark (come Substack: nessun avatar nello stato iniziale) */
.site-brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;margin-right:0}
.site-brand span{font-size:26px;font-weight:700;letter-spacing:normal;white-space:nowrap;color:var(--site-ink)}

/* menu: allineato a sinistra, subito dopo il nome, font piccolo */
.site-menu{
  display:flex;align-items:center;gap:0;margin:0;
  list-style:none;padding:0;
}
.site-menu a{
  position:relative;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--site-ink);
  letter-spacing:-0.15px;padding:8px 10px;white-space:nowrap;transition:opacity .15s;
}
.site-menu a:hover{opacity:.62}
.site-menu a[aria-current="page"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;height:3px;
  background:var(--site-ink);
}

/* azioni a destra: ricerca · condividi · Iscriviti */
.site-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.site-iconbtn{display:inline-flex;align-items:center;justify-content:center;
  color:var(--site-ink);text-decoration:none;padding:4px;transition:opacity .15s;background:none;border:none;cursor:pointer}
.site-iconbtn:hover{opacity:.6}
.site-iconbtn svg{display:block}
/* bottone Iscriviti — blu, testo bianco (radius 8px come Substack) */
.site-actions .site-subscribe{
  background:var(--site-accent);color:#fff;text-decoration:none;
  font-size:15px;font-weight:600;padding:14px 22px;border-radius:8px;
  border:none;transition:background .15s;white-space:nowrap;line-height:1;
}
.site-actions .site-subscribe:hover{background:var(--site-accent-d)}

/* hamburger (solo mobile) */
.site-burger{
  display:none;background:none;border:none;cursor:pointer;padding:8px;
  margin-left:-6px;color:var(--site-ink);
}
.site-burger svg{display:block}

/* ---- footer ----------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--site-line);margin-top:48px;
  padding:26px 18px 40px;color:var(--site-muted);font-size:13.5px;
}
.site-embed{max-width:1100px;margin:0 auto 26px;display:flex;justify-content:center}
.site-embed iframe{max-width:100%}
.site-footer__in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;
  gap:6px 16px;align-items:center;justify-content:space-between}
.site-footer a{color:var(--site-muted);text-decoration:none}
.site-footer a:hover{color:var(--site-ink);text-decoration:underline}

/* ---- contenitore generico pagina ------------------------------------- */
.site-wrap{max-width:880px;margin:0 auto;padding:34px 18px 0}

/* =======================================================================
   HOME — hero + griglia progetti
   ======================================================================= */
.site-hero{max-width:880px;margin:0 auto;padding:46px 18px 8px;text-align:center}
.site-hero img{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;display:block;object-fit:cover}
.site-hero h1{font-size:34px;line-height:1.1;font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.site-hero p{font-size:17px;color:var(--site-muted);margin:0 auto;max-width:560px;line-height:1.45}

.site-grid{
  max-width:1000px;margin:0 auto;padding:34px 18px 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;
}
.site-card{
  display:flex;flex-direction:column;background:var(--site-card);
  border:1px solid var(--site-line);border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.site-card:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,0,0,.08);border-color:#d8d8d8}
.site-card__thumb{aspect-ratio:16/10;background:#eee center/cover no-repeat;border-bottom:1px solid var(--site-line)}
.site-card__body{padding:16px 18px 20px}
.site-card__tag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--site-accent);margin:0 0 7px}
.site-card__title{font-size:19px;font-weight:700;line-height:1.2;margin:0 0 6px}
.site-card__desc{font-size:14.5px;color:var(--site-muted);line-height:1.45;margin:0}

/* =======================================================================
   MOBILE
   ======================================================================= */
@media (max-width:820px){
  .site-nav__bar{gap:12px;padding:0 16px}
  .site-burger{display:inline-flex}
  .site-iconbtn{display:none}   /* barra mobile pulita: nome + Iscriviti */
  .site-brand span{font-size:21px}
  .site-menu{
    position:fixed;top:var(--site-nav-h);left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;margin:0;
    background:#fff;border-bottom:1px solid var(--site-line);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    padding:6px 18px 12px;
    transform:translateY(-130%);transition:transform .22s ease;
    max-height:calc(100vh - var(--site-nav-h));overflow:auto;
  }
  .site-nav[data-open="true"] .site-menu{transform:translateY(0)}
  .site-menu li{width:100%}
  .site-menu a{display:block;width:100%;padding:13px 0;border-bottom:1px solid var(--site-line)}
  .site-menu a[aria-current="page"]{color:var(--site-accent)}
  .site-menu a[aria-current="page"]::after{display:none}
  .site-menu li:last-child a{border-bottom:none}
  .site-hero h1{font-size:27px}
  .site-hero p{font-size:15.5px}
}
@media (max-width:430px){
  .site-brand span{font-size:19px}
  .site-subscribe{padding:8px 14px;font-size:14.5px}
}