/* ===== Font ==========================================================
   Roma Neue Bold (700), unico peso del sito. Per cambiarlo: carica il .woff2
   in assets/fonts e modifica solo questo blocco.                        */
@font-face {
  font-family: "Site Sans";
  src: url("../fonts/RomaNeue-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ===== Misure del Figma (progetto a 1920 × 1080) ===================== */
:root {
  --u: calc(100vw / 1920);              /* 1 px del Figma */
  --font: "Site Sans", "Helvetica Neue", Arial, sans-serif;
  --fs: max(10.5px, calc(12 * var(--u))); /* tutti i testi a 12 px, come le descrizioni */
  --fs-desc: max(10.5px, calc(12 * var(--u)));
  --lh: 1;                              /* interlinea 13 su 13 */
  --side: calc(360 * var(--u));         /* colonna sinistra */
  --col: calc(343 * var(--u));          /* colonna progetto */
  --band-top: 48.89vh;                  /* 528 / 1080 */
  --band-h: calc(24 * var(--u));
  --grey: #cbd5dc;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #fff; color: #000; font-family: var(--font); font-weight: 700;
  font-size: var(--fs); line-height: var(--lh); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ----- colonna sinistra ----- */
.side { position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 3; pointer-events: none; }
.side > * { pointer-events: auto; }
.name { position: absolute; left: calc(15 * var(--u)); top: calc(5 * var(--u)); font-size: var(--fs);
  font-weight: 700; line-height: calc(24 * var(--u)); }
.tagline { position: absolute; left: calc(16 * var(--u)); top: calc(24 * var(--u)); width: calc(301 * var(--u));
  white-space: pre-line; line-height: max(10.5px, calc(13 * var(--u))); }
.menu { position: absolute; left: calc(16 * var(--u)); bottom: calc(5 * var(--u)); display: flex; gap: calc(23 * var(--u)); }
.menu button { text-decoration: underline; text-underline-offset: 0.15em; line-height: calc(24 * var(--u)); }
.menu button:hover, .panel.info a:hover { text-decoration: none; }

/* testi che compaiono nello stesso punto: progetto, info, contact */
.panel { position: absolute; left: calc(17 * var(--u)); top: calc(var(--band-top) + 6 * var(--u));
  width: calc(336 * var(--u)); font-size: var(--fs-desc); line-height: max(10.5px, calc(13 * var(--u))); }
.panel .row { display: flex; justify-content: space-between; margin-bottom: calc(16 * var(--u)); }
.panel .row span:first-child { width: calc(301 * var(--u)); }
.panel .text { width: calc(295 * var(--u)); font-weight: 700; white-space: pre-line; }
.panel .meta { margin-top: calc(13 * var(--u)); white-space: pre-line; }
.panel .cat { color: var(--grey); display: block; }
.panel.info { top: calc(var(--band-top) + 36 * var(--u)); width: calc(326 * var(--u)); font-weight: 700; white-space: pre-line; }
.panel.info a { display: block; text-decoration: underline; text-underline-offset: 0.15em; }
.panel.info .intro { margin-bottom: calc(13 * var(--u)); }

/* ----- area progetti: scorrimento orizzontale, mai sotto la colonna sinistra ----- */
.projects { position: fixed; top: 0; bottom: 0; left: var(--side); right: 0; display: flex;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.projects::-webkit-scrollbar { display: none; }

.col { position: relative; flex: 0 0 var(--col); height: 100%; isolation: isolate; }
.col .scroll { height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; }
.col .scroll::-webkit-scrollbar { display: none; }
.cell { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #111; }

/* livello "hover nero": grigio #d9d9d9 in modalità colore = bianco e nero */
.col .mono { position: absolute; inset: 0; background: #d9d9d9; mix-blend-mode: color;
  opacity: 1; transition: opacity .45s ease; pointer-events: none; z-index: 1; }
.col:hover .mono, .col.active .mono { opacity: 0; }

/* fascia semitrasparente */
.band { position: fixed; left: 0; right: 0; top: var(--band-top); height: var(--band-h); z-index: 2;
  background: rgba(245, 245, 245, .7); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); pointer-events: none; }

/* ===== Mobile (≤ 800 px) =========================================
   Comportamento ispirato alla registrazione: intestazione fissa,
   fascia a metà schermo con il progetto corrente, barra in basso.      */
.m { display: none; }
@media (max-width: 800px) {
  .side, .projects, .band { display: none; }
  body { overflow: auto; font-size: 13px; }
  .m { display: block; --top: env(safe-area-inset-top, 0px); --bot: env(safe-area-inset-bottom, 0px); }

  .m-head { position: fixed; top: 0; left: 0; right: 0; z-index: 5; padding: calc(var(--top) + 6px) 8px 0;
    display: flex; justify-content: space-between; line-height: 16px; pointer-events: none; }
  .m-head > * { pointer-events: auto; }
  .m-head .nm { display: block; }
  .m-tag { padding: calc(var(--top) + 22px) 8px 0; line-height: 13px; white-space: pre-line; min-height: 46vh; }
  .m button, .m a { padding: 0; min-height: 22px; text-decoration: none; }
  .m-link { display: inline-flex; align-items: center; min-width: 44px; justify-content: flex-end; }

  /* fascia fissa a metà schermo con nome e anno del progetto corrente */
  .m-band { position: fixed; left: 0; right: 0; top: 46vh; height: 24px; z-index: 4; display: flex;
    justify-content: space-between; align-items: center; padding: 0 8px; pointer-events: none;
    background: rgba(245, 245, 245, .7); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
    transition: opacity .2s; }
  .m-band:empty { opacity: 0; }

  .m-item { display: block; position: relative; isolation: isolate; }
  .m-item .cell { width: 100%; }
  .m-item .mono { position: absolute; inset: 0; background: #d9d9d9; mix-blend-mode: color; opacity: 1;
    transition: opacity .45s ease; pointer-events: none; }
  .m-item.active .mono { opacity: 0; }

  /* fondo della home: spazio bianco di mezzo schermo */
  .m-end { height: 50vh; }
  /* freccia "torna su": parte del footer, fissa, allineata sopra linkedin.
     Spessore 0,135 em (asta del Bold = 0,154 em), corpo alto 1,4 em      */
  .m-top { position: absolute; right: 8px; bottom: calc(var(--bot) + 6px + 16px + 8px);
    display: flex; align-items: flex-end; justify-content: flex-end; min-width: 44px; min-height: 44px;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .m-top.show { opacity: 1; visibility: visible; }
  .m-arrow { height: 1.4em; width: auto; overflow: visible; display: block; }
  .m-desc { padding: 24px 8px 50vh; line-height: 13px; white-space: pre-line; }
  .m-desc .meta { margin-top: 13px; }
  .m-desc .cat { color: var(--grey); display: block; }
  .m-info { padding: calc(var(--top) + 22px) 8px calc(var(--bot) + 80px); line-height: 13px; white-space: pre-line; }
  .m-info .lead { margin-bottom: 32px; }

  .m-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: space-between;
    align-items: flex-end; padding: 0 8px calc(var(--bot) + 6px); line-height: 16px; pointer-events: none; }
  .m-foot .m-link { min-height: 0; line-height: 16px; padding-top: 6px; }
  .m-head .m-link { min-height: 0; line-height: 16px; padding-bottom: 6px; align-items: flex-start; }
  .m-head { align-items: flex-start; }
  /* testata in "differenza": nera sul bianco, bianca sulle immagini scure */
  .m-head { color: #fff; mix-blend-mode: difference; }
  .m-foot .left { justify-content: flex-start; }
  .m-foot .right .m-link { min-width: 0; }
  /* voci del footer sottolineate come info/contact su desktop */
  .m-foot .m-link { text-decoration: underline; text-underline-offset: 0.15em; }
  .m-foot > * { pointer-events: auto; }
  .m-foot .right { display: flex; align-items: flex-end; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .col .mono, .m-item .mono { transition: none; } }