/* Stile comune del sito ricostruito (home, about, contact + work e progetti).
   Le pagine nate da Readymag usano un "canvas": ogni blocco ha la sua posizione desktop (--x --y --w --h, su 1024 px)
   e quella telefono (--px --py --pw --ph, su 320 px). Il canvas si scala con la larghezza della finestra. */

/* i font del sito con i nomi usati negli stili Readymag */
@font-face { font-family: custom_116870; font-weight: 400; src: url("../fonts/font-7a6a97ff-aec0-4675-90ba-2190f5ee18ca-dae6d7e4.otf") format("opentype"); }
@font-face { font-family: custom_116870; font-weight: 500; src: url("../fonts/font-ab125d2a-cfa8-4061-8c1a-4a4abd52ac1e-989c6c3d.otf") format("opentype"); }
@font-face { font-family: custom_116870; font-weight: 700; src: url("../fonts/font-1f9521cb-3d2c-4cae-afeb-dddc2f498f5d-772ded94.otf") format("opentype"); }
@font-face { font-family: custom_116870; font-weight: 400; font-style: italic; src: url("../fonts/font-ca9c75a0-9f16-4471-b3d4-e314070a3898-7cdae4b0.otf") format("opentype"); }
@font-face { font-family: custom_121484; font-weight: 500; src: url("../fonts/font-c6816b6f-24b1-459a-bce2-acbdee9a8087-056dbf3d.otf") format("opentype"); }

html, body { overflow-x: hidden; }
/* logo nella palette: nero ufficiale e dettagli off-white (il disegno non cambia) */
.brand-logo svg { fill: var(--black); }
.brand-logo svg [fill="#fff"], .brand-logo svg [fill="#ffffff"] { fill: var(--offwhite); }
.mobile-menu { z-index: 900; }

/* ------------------------------------------------ testata in vetro ("liquid glass"):
   sfoca e satura quello che scorre sotto, con una luce sottile sul bordo alto e la riga nera in basso */
.site-header {
  z-index: 1000;
  background: rgba(240, 241, 232, .42);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -10px 24px -18px rgba(255, 255, 255, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(240, 241, 232, .92); }
}
@media (max-width: 768px) {
  .site-header { background: rgba(240, 241, 232, .5); }
}

/* ------------------------------------------------ selettore lingua EN / IT */
.nav { right: calc(50% - 480px + 74px); }
.lang-switch { position: absolute; right: calc(50% - 480px); top: 39px; display: flex; align-items: center; height: 27px;
               border: 1px solid var(--ink); border-radius: 105px; padding: 0 3px; gap: 2px; }
.lang-opt { display: inline-flex; align-items: center; justify-content: center; height: 21px; min-width: 26px; padding: 0 6px;
            border-radius: 105px; font-weight: 500; font-size: 11px; letter-spacing: .04em;
            transition: background-color .3s var(--ease), color .3s var(--ease); }
.lang-opt.is-current { background: var(--ink); color: var(--bg); }
.lang-opt:not(.is-current):hover { background: var(--lime); }
.mobile-menu .lang-switch { position: static; margin-top: 34px; height: 38px; padding: 0 4px; }
.mobile-menu .lang-opt { height: 30px; min-width: 42px; font-size: 15px; }

/* ------------------------------------------------ canvas delle pagine Readymag */
.canvas.rmcanvas { position: relative; height: calc(var(--dh) * 1px); }
.blk { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
       width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); z-index: var(--z); }
.blk.txt .tv > * { margin: 0; }
.blk.txt .tv a { text-decoration: none; }
/* i pulsanti lime al passaggio diventano off-white come lo sfondo: un filo nero li tiene visibili */
.blk.btn:hover { box-shadow: inset 0 0 0 1px var(--black); }
.blk.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; overflow: hidden;
           transition: background-color .45s var(--ease), color .45s var(--ease), border-radius .45s var(--ease); }
.blk.pic .pbox, .blk.vid .vbox { display: block; width: 100%; height: 100%; overflow: hidden; }
.blk.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blk.pic .ring { position: absolute; inset: 0; pointer-events: none; }
.blk.vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* immagini cliccabili della galleria in home: stesso hover della pagina Work */
.blk.is-link img, .blk.is-link video { transition: transform .9s var(--ease), filter .6s var(--ease); }
.blk.is-link:hover img, .blk.is-link:hover video { transform: scale(1.04); filter: brightness(.82); }
@media (prefers-reduced-motion: reduce) { .blk.is-link:hover img, .blk.is-link:hover video { transform: none; } }
.blk.line i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; }
.blk.band { left: -3000px !important; width: 7024px !important; }
.blk.lottie svg { display: block; }

/* footer: come sul sito, senza linea sopra; sulle pagine Readymag parte subito dopo il canvas */
/* contact: il titolo "Based in Europe…" in off-white (il lime non si usa per i testi) */
[data-id="66eb057603bc36842b101e2f"] .tv > * { color: var(--offwhite); }

.site-footer { border-top: 0; }
.site-footer.flush { margin-top: 0; }

/* ------------------------------------------------ telefono */
@media (max-width: 768px) {
  .canvas.rmcanvas { zoom: var(--zp, 1.17); width: 320px; height: calc(var(--mh) * 1px); margin: 0 auto; }
  .blk { left: calc(var(--px) * 1px); top: calc(var(--py) * 1px); width: calc(var(--pw) * 1px); height: calc(var(--ph) * 1px); z-index: var(--pz); }
  .blk.no-phone { display: none; }
  .blk.band { left: -1000px !important; width: 2320px !important; }
  .lang-switch { display: none; }
  .mobile-menu .lang-switch { display: flex; }
}

/* ------------------------------------------------ contatore progetto con menu a tendina verso l'alto */
.mci-counter-btn { display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 15px; border-radius: 105px;
                   border: 1px solid var(--ink); background: rgba(240, 241, 232, .85); color: var(--ink); cursor: pointer;
                   font: 500 13px/1 "MCI Grotesk", sans-serif; font-variant-numeric: tabular-nums;
                   transition: background-color .35s var(--ease); }
.mci-counter-btn:hover, .mci-counter.is-open .mci-counter-btn { background: var(--lime); }
.mci-counter-btn .chev { display: inline-block; margin-left: 6px; transition: rotate .35s var(--ease); }
.mci-counter.is-open .chev { rotate: 180deg; }
.mci-projects { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 250px; margin: 0; padding: 8px;
                list-style: none; background: rgba(240, 241, 232, .96); border: 1px solid var(--ink); border-radius: 16px;
                opacity: 0; translate: 0 8px; visibility: hidden; pointer-events: none;
                transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s linear .3s; }
.mci-counter.is-open .mci-projects { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto;
                                     transition: opacity .3s var(--ease), translate .3s var(--ease); }
.mci-projects .mp-label { font-size: 11px; opacity: .6; padding: 4px 10px 6px; }
.mci-projects a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px;
                  font-size: 13px; line-height: 1.25; font-weight: 500;
                  opacity: 0; translate: 0 6px; transition: background-color .25s var(--ease), opacity .35s var(--ease), translate .35s var(--ease);
                  transition-delay: 0s, var(--d, 0ms), var(--d, 0ms); }
.mci-counter.is-open .mci-projects a { opacity: 1; translate: 0 0; }
.mci-projects a .n { font-variant-numeric: tabular-nums; opacity: .5; min-width: 2ch; }
.mci-projects a:hover, .mci-projects a:focus-visible { background: rgba(191, 215, 48, .45); outline: none; }
.mci-projects a.is-current { background: var(--lime); }
@media (prefers-reduced-motion: reduce) {
  .mci-projects, .mci-projects a { transition: none !important; translate: none !important; }
}

/* ------------------------------------------------ 20/10: ritocchi telefono */
@media (max-width: 768px) {
  /* home: lista delle collaborazioni più piccola e allineata a sinistra, così resta nel suo spazio e non finisce sul footer */
  [data-id="69bc290e3ad203294fb56c22"] .tv > * { font-size: 16px !important; line-height: 25px !important; text-align: left !important; letter-spacing: 0 !important; }
}