/* ───────────── Font: Manrope (variabile 200–800) ───────────── */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───────────── Token ───────────── */
:root {
  /* colori (dal documento) */
  --blue: #008aa6;      /* Works / logo */
  --pink: #f297b5;      /* Personal */
  --wine: #820d38;      /* Originals */
  --yellow: #8f9c00;    /* About */
  --green: #4aa381;     /* Licensing */
  --menu-w: 500; /* spessore delle voci di menu all'hover/attive; su desktop più marcato */
  --home: #ffa300;
  --navy: #002951;      /* Footer */
  --ink: #1e1e1e;       /* Testi */
  --accent: var(--blue);

  /* Le misure del documento sono pensate per una finestra di 1920 px.
     --u è "1 px del layout 1920": su finestre più piccole tutto si riduce in proporzione. */
  --u: max(calc(min(100vw, 1920px) / 1920), 0.5px);

  --header-h: max(64px, calc(120 * var(--u)));
  --logo-h: max(48px, calc(94 * var(--u)));
  --pad: max(16px, calc(60 * var(--u)));
  --gutter: max(12px, calc(24 * var(--u)));
  --bar-h: max(52px, calc(64 * var(--u)));

  /* grandezze dei testi (px del documento → minimo leggibile) */
  --menu-size: max(14px, calc(24 * var(--u)));
  --t-14: max(12px, calc(14 * var(--u)));
  --t-16: max(13px, calc(16 * var(--u)));
  --t-18: max(15px, calc(18 * var(--u)));
  --t-20: max(16px, calc(20 * var(--u)));
  --t-24: max(18px, calc(24 * var(--u)));
  --t-32: max(22px, calc(32 * var(--u)));
  --t-40: max(28px, calc(40 * var(--u)));
  --t-48: max(32px, calc(48 * var(--u)));

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: 250ms ease;
}
body[data-section="works"]     { --accent: var(--blue); }
body[data-section="personal"]  { --accent: var(--pink); }
body[data-section="originals"] { --accent: var(--wine); }
body[data-section="about"]     { --accent: var(--yellow); }
body[data-section="licensing"] { --accent: var(--green); }

/* ───────────── Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--t-18);
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; padding-top: var(--header-h); padding-bottom: calc(120 * var(--u)); }
a { color: inherit; text-decoration: none; }
img, picture { display: block; max-width: 100%; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.wrap { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: var(--pad); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* dissolvenza morbida tra le pagine (browser che la supportano); l'header resta fermo */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* caricamento progressivo delle immagini */
.js .item img, .js .row-cover img, .js .about-photo img { opacity: 0; transition: opacity 450ms ease; }
.js .item img.is-loaded, .js .row-cover img.is-loaded, .js .about-photo img.is-loaded { opacity: 1; }

/* ───────────── Header (fisso, 120px) ───────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);
  background: #fff;
  z-index: 50;
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo img { height: var(--logo-h); width: auto; max-width: min(46vw, calc(320 * var(--u))); object-fit: contain; object-position: left center; }
.logo-fallback { font-size: var(--t-24); text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }

.menu { display: flex; gap: max(14px, calc(50 * var(--u))); }
.menu-link {
  display: inline-flex; flex-direction: column; align-items: center;
  font-size: var(--menu-size);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
  transition: color var(--ease), font-weight var(--ease);
}
/* riserva lo spazio del peso "medium" per non far spostare le voci all'hover */
.menu-link::after {
  content: attr(data-text);
  font-weight: var(--menu-w); height: 0; overflow: hidden; visibility: hidden; user-select: none;
}
.menu-home:hover, .menu-home[aria-current]          { color: var(--home);   font-weight: var(--menu-w); }
.menu-works:hover, .menu-works[aria-current]         { color: var(--blue);   font-weight: var(--menu-w); }
.menu-personal:hover, .menu-personal[aria-current]   { color: var(--pink);   font-weight: var(--menu-w); }
.menu-originals:hover, .menu-originals[aria-current] { color: var(--wine);   font-weight: var(--menu-w); }
.menu-licensing:hover, .menu-licensing[aria-current] { color: var(--green); font-weight: var(--menu-w); }
.menu-about:hover, .menu-about[aria-current]         { color: var(--yellow); font-weight: var(--menu-w); }

/* ───────────── Footer (240px, blu scuro) ───────────── */
.site-footer { background: var(--navy); color: #fff; flex-shrink: 0; }
/* blocchi di testo centrati nel footer (margini destro e sinistro uguali), copyright subito sotto */
.footer-inner {
  display: grid; grid-template-columns: repeat(3, max-content); justify-content: center;
  align-items: end; /* l'ultima riga dei tre blocchi sta sulla stessa linea in basso */
  column-gap: calc(300 * var(--u)); row-gap: calc(28 * var(--u));
  padding-block: calc(40 * var(--u)) calc(24 * var(--u));
}
.footer-name { font-size: var(--t-20); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.footer-sub { font-size: var(--t-16); font-weight: 300; margin-top: 6px; }
.footer-tagline { font-size: var(--t-18); font-weight: 600; }
.footer-mail { font-size: var(--t-16); font-weight: 300; margin-top: 6px; }
/* l'email è un link ma senza sottolineatura: al passaggio diventa un po' più chiara/trasparente */
.footer-col .footer-mail a, .footer-col .footer-mail a:hover { border-bottom-color: transparent; }
.footer-links { font-size: var(--t-16); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.footer-col a { transition: opacity var(--ease); border-bottom: 1px solid transparent; }
.footer-col a:hover { opacity: .75; border-bottom-color: currentColor; }
.footer-copy { grid-column: 1 / -1; text-align: left; font-size: var(--t-14); font-weight: 300; opacity: .8; }
.footer-social { display: none; }
@media (max-width: 699px) {
  .footer-inner { display: grid; justify-content: stretch; column-gap: 16px; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 14px 16px; padding-block: 24px 16px; align-items: start; }
  .footer-id { grid-column: 1; grid-row: 1; }
  .footer-cta { grid-column: 1; grid-row: 2; margin-top: -6px; }
  .footer-links { display: none; }
  .footer-social { display: flex; flex-direction: column; gap: 14px; grid-column: 2; grid-row: 1 / span 2; align-items: center; }
  .footer-social a { display: block; width: 20px; color: #fff; border: 0; }
  .footer-social svg { display: block; width: 100%; height: auto; }
  .footer-copy { grid-row: 3; grid-column: 1 / -1; text-align: left; font-size: 10px; }
  .footer-name { font-size: 14px; }
  .footer-sub { font-size: 11px; margin-top: 3px; }
  .footer-tagline { font-size: 13px; }
  .footer-mail { font-size: 11px; margin-top: 3px; }
}

/* ───────────── Masonry (Home, Personal, gallerie progetto) ───────────── */
.masonry { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.masonry.ready { display: flex; align-items: flex-start; }
.masonry .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gutter); }
.item {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--r, 1.5);
  background: #f1f1f1;
  overflow: hidden;
}
.item picture, .item img { width: 100%; height: 100%; object-fit: cover; }
a[data-lightbox] { cursor: pointer; }
.item { transition: opacity 200ms ease; }
a.item:hover, a[data-lightbox]:hover, .item-video:hover { opacity: .6; }
.row-cover { transition: opacity 200ms ease; }
.row-cover:hover { opacity: .6; }
.item-video { cursor: pointer; background: #d9d9d9; }
.item-video .play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.9);
}
.item-video .play::after {
  content: ""; position: absolute; left: 25px; top: 19px;
  border-left: 20px solid var(--accent); border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.sentinel { height: 1px; }

/* ───────────── Home / Personal ───────────── */
.page-home .intro, .page-personal .intro, .page-originals .intro { font-size: var(--t-20); margin-top: calc(80 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.page-personal { padding-top: 0; }

/* ───────────── Works / Originals (elenco verticale) ───────────── */
.filters {
  position: sticky; top: var(--header-h); z-index: 40;
  height: var(--bar-h);
  background: #fff;
  display: flex; align-items: center;
}
.filters-inner {
  /* margin auto = centrato, ma se non c'è spazio parte da sinistra e si scorre (niente testo tagliato) */
  display: flex; gap: max(14px, calc(48 * var(--u))); align-items: center; margin-inline: auto;
  font-size: max(14px, calc(18 * var(--u))); font-weight: 300;
  /* line-height generosa: con overflow la "g" di Packaging veniva tagliata sotto */
  line-height: 1.7; padding-block: .1em;
  overflow-x: auto; max-width: 100%; padding-inline: var(--pad);
  scrollbar-width: none;
}
.filters-inner::-webkit-scrollbar { display: none; }
.filters-inner a { white-space: nowrap; color: var(--ink); opacity: .7; transition: color var(--ease), opacity var(--ease), font-weight var(--ease); }
.filters-inner a:hover, .filters-inner a[aria-current] { color: var(--accent); opacity: 1; font-weight: 400; }

.list { padding-top: calc(56 * var(--u)); }
.originals-list { padding-top: 0; }
.row { margin-bottom: calc(120 * var(--u)); }
.row:last-child { margin-bottom: 0; }
.row-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em;
  margin-bottom: calc(32 * var(--u)); font-weight: 300;
}
.row-title { font-size: var(--t-32); text-transform: uppercase; line-height: 1.2; align-items: flex-start; transition: color var(--ease), font-weight var(--ease); }
.row-title:hover { color: var(--accent); font-weight: 400; }
.sep { font-size: var(--t-32); line-height: 1.2; }
.row-meta { font-size: var(--t-16); }
.row-cover { display: block; aspect-ratio: 2 / 1; background: #f1f1f1; overflow: hidden; }
.row-cover picture, .row-cover img { width: 100%; height: 100%; object-fit: cover; }
.empty { text-align: center; padding-block: calc(80 * var(--u)); }

/* categorie / link cliccabili: grigi, poi colore di sezione all'hover (sempre colorati su touch) */
/* il peso cambia all'hover, ma lo spazio del peso maggiore è già riservato: niente spostamenti né "ingrandimenti" (come nel menu) */
.hold { display: inline-flex; flex-direction: column; align-items: center; }
.hold::after { content: attr(data-text); font-weight: 400; height: 0; overflow: hidden; visibility: hidden; user-select: none; }
.cat { color: var(--ink); font-weight: 200; transition: color var(--ease), font-weight var(--ease); }
.row-meta .cat { font-weight: 300; }
.cat:hover { color: var(--accent); font-weight: 400; }
@media (hover: none) { .cat { color: var(--accent); } }

/* ───────────── Pagina progetto ───────────── */
.project { padding-top: calc(80 * var(--u)); }
.proj-title { font-size: var(--t-40); font-weight: 300; text-transform: uppercase; line-height: 1.15; }
.proj-info { margin-top: calc(16 * var(--u)); min-height: max(26px, calc(32 * var(--u))); display: flex; flex-wrap: wrap; align-items: center; font-size: var(--t-18); }
.proj-info > span + span::before { content: "|"; margin-inline: .6em; }
.proj-desc { margin-top: calc(16 * var(--u)); max-width: min(100%, calc(900 * var(--u))); font-size: var(--t-18); line-height: 1.45; text-align: left; }
.gallery { margin-top: calc(80 * var(--u)); }
.back-wrap { margin-top: calc(80 * var(--u)); text-align: center; }
.back { font-size: var(--t-18); font-weight: 200; color: var(--ink); transition: color var(--ease), font-weight var(--ease); }
.back:hover { color: var(--accent); font-weight: 400; }
@media (hover: none) { .back { color: var(--accent); } }

/* ───────────── About ───────────── */
.about {
  padding-top: calc(80 * var(--u)); padding-bottom: calc(40 * var(--u));
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: stretch;
}
/* riquadro foto: proporzione fissa (888 × 770), la foto viene ritagliata per riempirlo */
.about > * { min-width: 0; }
.about-photo { position: relative; background: #f1f1f1; overflow: hidden; width: 100%; }
/* desktop: la foto è alta quanto il blocco di testo; sotto 800px torna a una proporzione fissa */
.about-photo { min-height: calc(240 * var(--u)); }
.about-photo::before { content: ""; display: block; padding-top: 0; }
.about-photo picture, .about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* testo e foto centrati tra loro in verticale */
.about-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: calc(48 * var(--u)); }
.about-name { font-size: max(26px, calc(36 * var(--u))); font-weight: 300; text-transform: uppercase; line-height: 1.1; }
.about-sub { margin-top: calc(8 * var(--u)); font-size: var(--t-16); }
.bio { margin-top: calc(28 * var(--u)); font-size: var(--t-16); line-height: 1.6; max-width: min(100%, calc(760 * var(--u))); }
.bio p + p { margin-top: 1em; }
.about-cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(28 * var(--u)); padding-top: calc(40 * var(--u)); }
.about-cta h2 { font-size: var(--t-18); font-weight: 300; text-transform: uppercase; }
.social { display: flex; gap: calc(40 * var(--u)); }
.social a { display: block; width: max(26px, calc(36 * var(--u))); color: var(--ink); transition: color var(--ease); }
.social a:hover { color: var(--yellow); }
.social svg { display: block; width: 100%; height: auto; }
.cv { font-size: var(--t-18); border-bottom: 1px solid currentColor; transition: color var(--ease), font-weight var(--ease); }
.cv:hover { color: var(--yellow); font-weight: 400; }
body[data-section="about"] main { padding-bottom: calc(80 * var(--u)); }
@media (max-width: 699px) {
  .about { grid-template-columns: 1fr; gap: 32px; }
  .about-photo::before { padding-top: 75%; }
  .about-text { padding-left: 0; }
}

/* ───────────── Lightbox ───────────── */
.lb {
  position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,.98);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 250ms ease;
}
.lb.open { opacity: 1; }
.lb-track {
  flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior: contain;
}
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: 72px clamp(16px, 6vw, 96px);
}
.lb-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-slide iframe, .lb-slide video { width: min(100%, 1400px); aspect-ratio: 16 / 9; max-height: 100%; border: 0; background: #000; }
.lb button {
  position: absolute; border: 0; background: none; cursor: pointer; color: var(--ink);
  font: inherit; width: 48px; height: 48px; display: grid; place-items: center;
  transition: color var(--ease);
}
.lb button:hover { color: var(--accent); }
.lb .lb-close { top: 12px; right: 16px; font-size: 40px; font-weight: 200; line-height: 1; }
.lb .lb-prev, .lb .lb-next { top: 50%; margin-top: -24px; font-size: 32px; font-weight: 200; }
.lb .lb-prev { left: 12px; } .lb .lb-next { right: 12px; }
.lb-count { position: absolute; top: 24px; left: 24px; font-size: 14px; }
.lb[data-single] .lb-prev, .lb[data-single] .lb-next, .lb[data-single] .lb-count { display: none; }
body.lb-open { overflow: hidden; }


/* ───────────── Personal: apertura al centro, pagina sotto attenuata ma visibile ───────────── */
.lbs {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(255, 255, 255, .8);
  opacity: 0; transition: opacity 250ms ease;
}
.lbs.open { opacity: 1; }
.lbs-track {
  position: absolute; inset: 0; display: flex; align-items: center; gap: max(32px, calc(72 * var(--u)));
  overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding-inline: max(4vw, 24px); scroll-snap-type: x proximity;
}
.lbs-track::-webkit-scrollbar { display: none; }
/* margin auto sui due estremi: centrata se c'è spazio, scorrevole da sinistra se non ce n'è */
.lbs-track > :first-child { margin-left: auto; }
.lbs-track > :last-child { margin-right: auto; }
.lbs-img {
  flex: none; display: block; width: auto; max-width: none; aspect-ratio: var(--r);
  height: min(64vh, 760px); object-fit: contain; scroll-snap-align: center; user-select: none;
  background: #f1f1f1;
}
.lbs[data-single] .lbs-img { height: min(66vh, calc(80vw / var(--r))); }
.lbs button {
  position: absolute; border: 0; background: none; cursor: pointer; color: var(--ink);
  font: inherit; width: 48px; height: 48px; display: grid; place-items: center; transition: color var(--ease);
}
.lbs button:hover { color: var(--accent); }
.lbs .lbs-close { top: 12px; right: 16px; font-size: 40px; font-weight: 200; line-height: 1; }
.lbs .lbs-prev, .lbs .lbs-next { top: 50%; margin-top: -24px; font-size: 32px; font-weight: 200; }
.lbs .lbs-prev { left: 12px; } .lbs .lbs-next { right: 12px; }
.lbs[data-single] .lbs-prev, .lbs[data-single] .lbs-next { display: none; }


/* ───────────── Angoli arrotondati (un solo valore da cambiare) ───────────── */
:root { --radius: max(3px, calc(6 * var(--u))); }
.item, .row-cover, .about-photo, .lbs-img, .lb img { border-radius: var(--radius); overflow: hidden; }
.sold { color: var(--wine); font-weight: 400; }

/* ───────────── Licensing ───────────── */
.licensing .proj-desc, .lic-text { max-width: none; }
.lic-text { margin-top: calc(16 * var(--u)); font-size: var(--t-18); line-height: 1.45; }
.lic-text p + p { margin-top: 1em; }
.lic-links { margin: calc(48 * var(--u)) 0 calc(56 * var(--u)); display: flex; flex-wrap: wrap; gap: 12px calc(16 * var(--u)); }
.lic-links a {
  display: inline-flex; flex-direction: column; align-items: center; font-size: max(14px, calc(17 * var(--u))); line-height: 1.2;
  padding: max(9px, calc(12 * var(--u))) max(17px, calc(25 * var(--u)));
  background: #ececec; color: var(--ink); border: 0; border-radius: max(8px, calc(14 * var(--u)));
  transition: background-color var(--ease), color var(--ease), font-weight var(--ease);
}
/* il testo "semibold" è riservato in anticipo: il bottone non cambia larghezza */
.lic-links a::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; user-select: none; }
.lic-links a:hover, .lic-links a:active, .lic-links a:focus-visible { background: var(--accent); color: #fff; font-weight: 600; }

/* ───────────── Telefono: logo centrato sopra, menu su una riga sotto ───────────── */
@media (max-width: 699px) {
  :root { --header-h: 100px; }
  .header-inner { flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; padding-top: 20px; }
  .logo { display: block; }
  .logo img { height: 36px; object-position: center; }
  .menu { width: 100%; justify-content: space-between; gap: 6px; }
  .menu-link { font-size: 11.5px; }
}
@media (max-width: 340px) { .menu-link { font-size: 10px; } .menu { gap: 4px; } }

/* Telefono: titoli dell'elenco più piccoli; categorie su più righe */
@media (max-width: 699px) {
  .row-title, .sep { font-size: 17px; }
  .row-meta { font-size: 12px; }
  .row-head { margin-bottom: 14px; gap: 0 .3em; }
  .row-title, .row-meta { line-height: 1.25; }
  .row { margin-bottom: 32px; }
  /* categorie: fisse sotto il menu, più piccole del menu principale, su più righe centrate */
  .filters { height: auto; min-height: 0; padding-block: 8px; }
  .filters-inner { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 2px 16px; padding-inline: var(--pad); margin-inline: 0; width: 100%; font-size: 10.5px; line-height: 1.6; }
}

/* "back to…" in alto, piccolo, sopra il titolo del progetto, con freccia a sinistra (cliccabile, non fa parte della bio) */
.back-top { position: relative; padding-left: 1.7em; font-size: var(--t-14); margin-bottom: calc(14 * var(--u)); }
.back-top::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -.5em; width: 1.15em; height: 1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 8H3M9 2L3 8l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 8H3M9 2L3 8l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--ease);
}
.back-top:hover::before { transform: translateX(-3px); }
@media (max-width: 699px) { .back-top { font-size: 12px; margin-bottom: 10px; } }

/* ───── Licensing: pagina singolo pattern ───── */
.lic-head { display: grid; grid-template-columns: 46fr 54fr; gap: calc(48 * var(--u)); align-items: stretch; margin-top: calc(8 * var(--u)); margin-bottom: calc(80 * var(--u)); }
.lic-main { min-width: 0; align-self: start; }
.lic-main .item { display: block; }
.lic-main .item { aspect-ratio: 1; }
.lic-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lic-side { position: relative; min-width: 0; }
.lic-side-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: calc(24 * var(--u)); overflow: hidden; }
.lic-foot { font-size: var(--t-16); font-weight: 300; margin-bottom: calc(16 * var(--u)); }
.lic-code { font-size: var(--t-18); font-weight: 300; margin-bottom: calc(8 * var(--u)); }
.lic-variants { display: flex; gap: calc(16 * var(--u)); margin-top: calc(32 * var(--u)); }
.lic-variants .item { display: block; width: calc(190 * var(--u)); min-width: 64px; aspect-ratio: 1; overflow: hidden; }
.lic-variants img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lic-note { margin-top: calc(24 * var(--u)); font-size: var(--t-18); line-height: 1.45; max-width: 28em; }
.lic-meta { margin: 0; font-size: var(--t-18); line-height: 1.5; }
.lic-meta dt { font-weight: 300; }
.lic-meta dd { margin: 0; }
.lic-meta .lic-type { font-weight: 700; }
@media (max-width: 699px) {
  .lic-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
  .lic-side-in { position: static; gap: 20px; }
  .lic-variants .item { width: 72px; }
  .lic-variants { gap: 10px; margin-top: 18px; }
}
.protected { cursor: default; }
.protected img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.lic-head .item:hover { opacity: 1; }
.lic-ask { margin: calc(32 * var(--u)) 0 0; }

/* Telefono: testi e titoli più piccoli, in proporzione con menu e sottomenu */
@media (max-width: 699px) {
  .proj-title { font-size: 21px; }
  .proj-desc, .lic-text, .lic-note, .lic-meta, .lic-code, .proj-info { font-size: 12px; line-height: 1.5; }
  .lic-links { gap: 8px; margin: 18px 0 32px; }
  .lic-links a { font-size: 12px; padding: 8px 14px; border-radius: 9px; }
  .lic-links li { list-style: none; }
  .lic-variants .item { width: 60px; }
  .bio { font-size: 12px; line-height: 1.55; }
  .page-home .intro, .page-personal .intro, .page-originals .intro { font-size: 12px; }
  .about-name { font-size: 21px; }
  .about-sub { font-size: 12px; }
}
@media (max-width: 699px) { body[data-section="licensing"] .filters-inner { font-size: 11.5px; } }
.original-ask { margin: calc(28 * var(--u)) 0 calc(48 * var(--u)); padding: 0; list-style: none; }

@media (min-width: 700px) { body[data-section="licensing"] .filters-inner { font-size: max(16px, calc(22 * var(--u))); } }
@media (min-width: 700px) { .page-home .intro, .page-personal .intro, .page-originals .intro { margin-bottom: calc(44 * var(--u)); } }
@media (max-width: 699px) {
  .back { font-size: 12px; }
  .back-wrap { margin-top: 36px; }
  main { padding-bottom: 48px; }
}
.lic-coll { margin-top: calc(6 * var(--u)); font-size: var(--t-18); font-weight: 300; }
@media (max-width: 699px) { .lic-coll { font-size: 12px; margin-top: 4px; } }
.lic-coll .cat { font-weight: 300; }
.lic-coll .cat:hover { font-weight: 400; }
.lic-meta { margin-top: calc(32 * var(--u)); }
.lic-side-in > .lic-ask { margin: 0; align-self: flex-start; }
.lic-ask a { margin-bottom: 0; }
@media (max-width: 699px) { .lic-side-in > .lic-ask { margin-top: 18px; } }
/* Telefono: codice, titolo e collezione in alto; poi immagine grande, varianti, nota, box, pulsante */
@media (max-width: 699px) {
  .lic-head { display: flex; flex-direction: column; gap: 0; }
  .lic-side, .lic-side-in, .lic-top { display: contents; }
  .lic-code { order: 1; margin-bottom: 4px; }
  .lic-head .proj-title { order: 2; }
  .lic-coll { order: 3; margin-bottom: 18px; }
  .lic-main { order: 4; }
  .lic-variants { order: 5; margin-top: 10px; }
  .lic-note { order: 6; margin-top: 18px; }
  .lic-meta { order: 7; margin-top: 18px; }
  .lic-side-in > .lic-ask { order: 8; margin-top: 18px; }
}
@media (max-width: 380px) { .menu-link { font-size: 10.5px; } .menu { gap: 4px; } }
@media (min-width: 700px) { :root { --menu-w: 600; } }
.about-cta .cv-btn { margin: 0; justify-content: center; }
.about-cta .cv-btn li { list-style: none; }
.cat-sep { margin-inline: .6em; font-weight: 200; }
.row-meta .cat-sep { font-weight: 300; }
/* pagina progetto: cliente, barre, categorie e anno hanno lo stesso corpo e lo stesso spessore; le categorie cambiano solo all'hover */
.proj-info .cat, .proj-info .cat-sep { font-weight: inherit; }
.proj-info .cat:hover { font-weight: 400; }