@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

/* Layout wide 910→1360 (sperimentale) — commenta la riga sotto per tornare a 910px fissi */

@import url("portfolio-layout-wide.css");



/* Telari Mary portfolio — layout responsive (mobile / viewport stretti) */



:root {

  --portfolio-green: #c3d23c;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



img {

  max-width: 100%;

  height: auto;

}



table {

  border-collapse: collapse;

}



/* Schede progetto / hub: titolo pagina Open Sans 32 */

td.title_work,

.title_work {

  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

  font-size: 32px !important;

  line-height: 40px !important;

  font-weight: 300 !important;

  color: #666666 !important;

}



.title_work.title_work--display,

td.title_work.title_work--display {

  font-size: 32px !important;

  line-height: 40px !important;

}



.txt_work,

.txt_work span {

  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

  font-size: 14px !important;

  line-height: 20px !important;

  font-weight: 300 !important;

}



.txt_work_bold,

.txt_work .txt_work_bold,

.txt_work span.txt_work_bold {

  font-size: 14px !important;

  line-height: 20px !important;

  font-weight: 600 !important;

}



.txt_work a:link,

.txt_work a:visited,

.txt_work a:hover,

.txt_work a:active {

  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

  font-size: 14px !important;

  line-height: 20px !important;

  font-weight: 600 !important;

}



/* Schede progetto: blocco intro sotto titolo (18px; corpo 300, etichette e link 600) */

.portfolio-work-intro .txt_work,

.portfolio-work-intro .txt_work span:not(.txt_work_bold),

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work,

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work span:not(.txt_work_bold) {

  font-size: 18px !important;

  line-height: 26px !important;

  font-weight: 300 !important;

}



.portfolio-work-intro .txt_work_bold,

.portfolio-work-intro .txt_work .txt_work_bold,

.portfolio-work-intro .txt_work span.txt_work_bold,

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work_bold,

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work .txt_work_bold,

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work span.txt_work_bold {

  font-size: 18px !important;

  line-height: 26px !important;

  font-weight: 600 !important;

}



.portfolio-work-intro .txt_work a:link,

.portfolio-work-intro .txt_work a:visited,

.portfolio-work-intro .txt_work a:hover,

.portfolio-work-intro .txt_work a:active,

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work a:link,

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work a:visited,

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work a:hover,

table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work a:active {

  font-size: 18px !important;

  line-height: 26px !important;

  font-weight: 600 !important;

}



/* Immersive Storytelling: paragrafi nel corpo */

.immersive-copy p {

  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

  font-weight: 300 !important;

  line-height: 20px !important;

}



.mobile-quicknav {

  display: none;

}



/* Home: titolo + immagine top_visual + link (sostituisce top.jpg / image map) */

.portfolio-top {

  position: relative;

  z-index: 0;

  max-width: 910px;

  margin: 0 auto;

  text-align: left;

  color: #fff;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

  font-weight: 300;

  padding-bottom: 16px;

}



/* Unico full-bleed: fascia verde header (contenuto nel guscio max 1360 / 20px pad) */

.portfolio-top::before {

  content: "";

  position: absolute;

  z-index: -1;

  top: 0;

  bottom: 0;

  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background-color: var(--portfolio-green);

}



.portfolio-top__kicker {

  margin: 0;

  padding: 32px 0;

  font-size: 38px;

  line-height: 48px;

  font-weight: 300;

  color: #fff;

}



.portfolio-top__name {

  font-size: 38px;

  line-height: 42px;

  font-weight: 400;

  text-decoration: underline;

  text-decoration-color: #ffdd03;

  text-underline-offset: 0.15em;

}



.portfolio-top__role {

  font-size: 34px;

  line-height: 44px;

  font-weight: 300;

}



/* Home: più spazio tra nome e statement (sulle interne il role è nascosto) */

header.portfolio-top:not(.portfolio-top--project) .portfolio-top__role {

  margin-top: 18px;

}



.portfolio-top__sep {

  color: #fff;

  font-weight: 300;

  padding: 0 5px;

}



.portfolio-top__visual-bleed {

  display: block;

}



.portfolio-top__visual-bleed picture {

  display: block;

}



.portfolio-top__visual {

  display: block;

  width: 100%;

  max-width: 910px;

  height: auto;

  margin: 0;

}



/* Pagine progetto: stesso kicker dell’index + strip imgs/top03.jpg (solo visual, 910×30).

   padding-bottom come la home, così sotto al menu resta respiro prima del bordo della fascia verde. */

.portfolio-top--project {

  padding-bottom: 16px;

}



.portfolio-top--project .portfolio-top__visual {

  aspect-ratio: 910 / 30;

}



/* Spazio tra testata progetto e titolo pagina; link a index (override a:link verde nelle pagine work) */

td[width="910"] > header.portfolio-top--project {

  margin-bottom: 28px;

}



/* Pagine interne (non home): niente statement nel titolo testata */

header.portfolio-top--project .portfolio-top__role {

  display: none !important;

}



header.portfolio-top--project .portfolio-top__name {

  margin-bottom: 32px;

}



header.portfolio-top--project .portfolio-top__home-link {

  display: block;

  color: #fff;

  text-decoration: none;

}



header.portfolio-top--project .portfolio-top__home-link:link,

header.portfolio-top--project .portfolio-top__home-link:visited,

header.portfolio-top--project .portfolio-top__home-link:hover,

header.portfolio-top--project .portfolio-top__home-link:active,

header.portfolio-top--project .portfolio-top__home-link:focus,

header.portfolio-top--project .portfolio-top__home-link:focus-visible {

  color: #fff;

  text-decoration: none;

}



/* Menu nelle pagine interne: forza bianco come la home (gli a:link verdi nel <style> delle singole work altrimenti vincono) */

header.portfolio-top--project .portfolio-top__nav {

  color: #fff;

  font-size: 13px;

}



header.portfolio-top--project .portfolio-top__nav a,

header.portfolio-top--project .portfolio-top__nav a:link,

header.portfolio-top--project .portfolio-top__nav a:visited,

header.portfolio-top--project .portfolio-top__nav a:hover,

header.portfolio-top--project .portfolio-top__nav a:active,

header.portfolio-top--project .portfolio-top__nav a:focus,

header.portfolio-top--project .portfolio-top__nav a:focus-visible {

  color: #fff;

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;

}



header.portfolio-top--project .portfolio-top__nav a:hover,

header.portfolio-top--project .portfolio-top__nav a:focus {

  color: #fff;

  text-decoration: underline;

}



header.portfolio-top--project .portfolio-top__nav .portfolio-top__linksep {

  color: #fff;

}



.portfolio-top__nav {

  display: flex;

  flex-wrap: nowrap;

  justify-content: flex-start;

  align-items: center;

  gap: 16px;

  margin: 16px 0 0;

  padding: 0 4px;

  font-size: 13px;

  line-height: 1.65;

  font-weight: 300;

  color: #fff;

  text-align: left;

}



.portfolio-top__nav-group {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  column-gap: 0;

  row-gap: 4px;

}



.portfolio-top__nav-group--primary {

  justify-content: flex-start;

}



.portfolio-top__nav a,

.portfolio-top__nav a:visited {

  color: #fff;

  font-weight: 700;

  text-decoration: none;

}



.portfolio-top__nav a .portfolio-top__cv-icon {

  display: inline-block;

  vertical-align: -0.2em;

  margin-right: 5px;

  width: 14px;

  height: 14px;

  flex-shrink: 0;

}



.portfolio-top__nav a.portfolio-top__linkedin {

  display: inline-flex;

  align-items: center;

  vertical-align: middle;

  text-decoration: none;

}



.portfolio-top__nav a .portfolio-top__linkedin-icon {

  display: block;

  width: 14px;

  height: 14px;

  flex-shrink: 0;

  object-fit: contain;

  vertical-align: middle;

}



.portfolio-top__nav a.portfolio-top__linkedin:hover,

.portfolio-top__nav a.portfolio-top__linkedin:focus-visible {

  text-decoration: none;

  opacity: 0.85;

}



.portfolio-top__nav a:hover,

.portfolio-top__nav a:focus {

  color: #fff;

  text-decoration: underline;

}



.portfolio-top__linksep {

  color: #fff;

  font-weight: 300;

}



.portfolio-top__nav .portfolio-top__linksep {

  display: inline-block;

  padding: 0 6px;

}



/* Desktop (≥769px): margine interno 20px per lato sul guscio centrale */

@media screen and (min-width: 769px) {

  body > table[width="100%"] > tbody > tr > td[width="910"] {

    padding-left: 20px;

    padding-right: 20px;

    box-sizing: border-box;

  }

}



/* Desktop (≥769px): riga 1 = Mary Telari | menu; riga 2 = statement a tutta larghezza; riga 3 = strip visiva; niente | tra nome e statement */

@media screen and (min-width: 769px) {

  header.portfolio-top {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    grid-template-rows: auto auto auto;

    column-gap: 24px;

    align-items: start;

  }



  header.portfolio-top--project .portfolio-top__home-link {

    display: contents;

  }



  .portfolio-top__kicker {

    display: contents;

  }



  .portfolio-top__name {

    grid-column: 1;

    grid-row: 1;

    margin: 0;

    padding: 32px 0 0;

    align-self: start;

    min-width: 0;

    font-size: 34px;

    font-weight: 600;

  }



  .portfolio-top__nav {

    grid-column: 2;

    grid-row: 1;

    margin: 0;

    padding: 32px 4px 0 0;

    align-self: start;

    justify-self: end;

    text-align: right;

    justify-content: flex-end;

    flex-wrap: wrap;

  }



  .portfolio-top__nav-group--primary {

    justify-content: flex-end;

  }



  .portfolio-top__role {

    grid-column: 1 / -1;

    grid-row: 2;

    display: block;

    width: 100%;

    max-width: none;

    margin: 8px 0 0;

    padding: 0 0 20px;

    box-sizing: border-box;

    font-size: 42px;

    line-height: 50px;

  }



  /* Home desktop: statement max 1000px, allineato a sinistra */

  body.portfolio-home-alt header.portfolio-top:not(.portfolio-top--project) .portfolio-top__role {

    max-width: 1000px;

    width: 100%;

    justify-self: start;

    margin-left: 0;

    margin-right: auto;

    font-size: 48px;

    line-height: 57px;

  }



  .portfolio-top__visual-bleed {

    grid-column: 1 / -1;

    grid-row: 3;

  }



  /* Home desktop: top_visual altezza fissa, taglio laterale al restringere */

  body.portfolio-home-alt header.portfolio-top:not(.portfolio-top--project) .portfolio-top__visual-bleed {

    height: 230px;

    overflow: hidden;

  }



  body.portfolio-home-alt header.portfolio-top:not(.portfolio-top--project) .portfolio-top__visual-bleed picture {

    width: 100%;

    height: 100%;

  }



  body.portfolio-home-alt header.portfolio-top:not(.portfolio-top--project) .portfolio-top__visual {

    width: 100% !important;

    height: 100% !important;

    aspect-ratio: unset;

    object-fit: cover;

    object-position: left top;

  }



  .portfolio-top__sep {

    display: none !important;

  }



  /* Schede interne: griglia a 2 righe (nome + menu | strip); stesso padding della home su nome/menu */

  header.portfolio-top--project {

    grid-template-rows: auto auto;

  }



  header.portfolio-top--project .portfolio-top__visual-bleed {

    grid-row: 2;

  }



  /* Desktop: niente spazio sotto la strip sulle pagine interne (home resta 16px da .portfolio-top) */

  header.portfolio-top.portfolio-top--project {

    padding-bottom: 0;

  }

}



/* Card portfolio (index): titolo editabile sotto l’immagine, verde come il top */

.portfolio-card {

  display: block;

  width: 100%;

  max-width: 284px;

  margin: 0 auto;

  text-align: left;

  box-sizing: border-box;

}



.portfolio-card__link {

  display: flex;

  flex-direction: column;

  color: inherit;

  text-decoration: none;

  min-width: 0;

}



.portfolio-card__link:hover .portfolio-card__title,

.portfolio-card__link:focus-visible .portfolio-card__title {

  text-decoration: none;

}



.portfolio-card__title {

  order: 2;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

  font-size: 16px;

  font-weight: 600;

  line-height: 1.25;

  color: #fff;

  background-color: var(--portfolio-green);

  padding: 6px 12px;

  margin: 0;

  box-sizing: border-box;

  overflow-wrap: break-word;

}



.portfolio-card__media {

  order: 1;

  display: block;

  line-height: 0;

}



.portfolio-card__media img {

  display: block;

  width: 100%;

  max-width: 284px;

  height: auto;

  aspect-ratio: 284 / 185;

  margin: 0;

}



/* Prima fila index: due card larghe ~50% desktop, colonna unica su mobile */

.portfolio-featured-grid {

  width: 100%;

  max-width: 910px;

  margin: 0 auto;

  table-layout: fixed;

  border-collapse: collapse;

}



.portfolio-featured-grid__cell {

  width: 50%;

  vertical-align: top;

  padding: 0;

  box-sizing: border-box;

  /* consente alle card di restringersi sotto la larghezza intrinseca delle img (flex / table) */

  min-width: 0;

}



.portfolio-featured-grid__cell--gap,

.portfolio-featured-grid__cell--vogue,

.portfolio-featured-grid__cell--alfa {

  padding-right: 14px;

}



.portfolio-featured-grid__cell--gap + .portfolio-featured-grid__cell,

.portfolio-featured-grid__cell--vogue + .portfolio-featured-grid__cell,

.portfolio-featured-grid__cell--alfa + .portfolio-featured-grid__cell {

  padding-left: 14px;

}



.portfolio-featured-grid tbody tr + tr .portfolio-featured-grid__cell {

  padding-top: 30px;

}



.portfolio-card--wide {

  max-width: none;

  width: 100%;

  min-width: 0;

}



.portfolio-card--wide .portfolio-card__title {

  max-width: none;

}



.portfolio-card--wide .portfolio-card__media.portfolio-card__media--dual {

  max-width: none;

}



.portfolio-card__media--dual {

  position: relative;

  overflow: visible;

  min-width: 0;

}



.portfolio-card__dual-stack {

  position: relative;

  width: 100%;

  min-width: 0;

  aspect-ratio: 1200 / 782;

  overflow: hidden;

}



.portfolio-card__dual-stack .portfolio-card__thumb {

  display: block;

  width: 100%;

  height: 100%;

  min-width: 0;

  object-fit: cover;

  margin: 0;

  max-width: none !important;

  aspect-ratio: auto;

}



.portfolio-card__dual-stack picture.portfolio-card__thumb {

  height: 100%;

}



.portfolio-card__dual-stack picture.portfolio-card__thumb img {

  display: block;

  width: 100%;

  height: 100%;

  min-width: 0;

  object-fit: cover;

  margin: 0;

  max-width: none !important;

}



.portfolio-card__dual-stack .portfolio-card__thumb--base {

  position: relative;

  z-index: 0;

}



.portfolio-card__dual-stack picture.portfolio-card__thumb--base {

  position: relative;

  z-index: 0;

}



.portfolio-card__dual-stack .portfolio-card__thumb--color {

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: 1;

  opacity: 0;

  transition: opacity 0.2s ease;

}



.portfolio-card__dual-stack picture.portfolio-card__thumb--color {

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: 1;

  opacity: 0;

  transition: opacity 0.2s ease;

}



.portfolio-card--wide .portfolio-card__link:hover .portfolio-card__thumb--color,

.portfolio-card--wide .portfolio-card__link:focus-visible .portfolio-card__thumb--color {

  opacity: 1;

}



/* Stroke sullo stack immagini (non sul titolo overlay) */

.portfolio-card--wide .portfolio-card__dual-stack::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 3;

  box-shadow: inset 0 0 0 1px #b6b6b6;

  pointer-events: none;

}



.portfolio-card--wide .portfolio-card__dual-stack::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  box-shadow: inset 0 0 0 8px #d6d6d6;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.2s ease;

}



.portfolio-card--wide .portfolio-card__link:hover .portfolio-card__dual-stack::after,

.portfolio-card--wide .portfolio-card__link:focus-visible .portfolio-card__dual-stack::after {

  opacity: 1;

}



/* Desktop: prima card — titolo sotto l’immagine, stessa larghezza della colonna */

.portfolio-card__media--dual-vs-mob {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 0;

  overflow: visible;

  max-width: none;

}



.portfolio-card__media--dual-vs-mob .portfolio-card__dual-stack {

  flex: 0 0 auto;

  width: 100%;

}



.portfolio-card__media--dual-vs-mob .portfolio-card__title--vs-overlay {

  position: static;

  width: 100%;

  flex: 0 0 auto;

  align-self: stretch;

  display: block;

  box-sizing: border-box;

}



.portfolio-card__media--dual-vs-mob .portfolio-card__title--vs-overlay .portfolio-card__title-line {

  display: inline;

  width: auto;

  background-color: transparent;

  padding: 0;

  line-height: inherit;

  white-space: normal;

}



.portfolio-card__media--dual-vs-mob .portfolio-card__title--vs-overlay .portfolio-card__title-line + .portfolio-card__title-line {

  margin-left: 0.35em;

}



/* Seconda card featured: overlay solo su mobile; desktop resta titolo esterno */

@media screen and (min-width: 769px) {

  .portfolio-card__title--featured-mobile {

    display: none !important;

  }

}



/* Footer strip sotto la griglia: footer_visual_1360.png (1360×30) */

.portfolio-bottom-bleed {

  display: block;

}



.portfolio-bottom-bleed picture {

  display: block;

}



.portfolio-bottom__img {

  display: block;

  width: 100%;

  max-width: 1360px;

  height: auto;

  margin: 0 auto;

}



/* Schede legacy (solo riga <td><img…>): la riga pxl 1×30 non deve collassare; backup se due immagini fossero <tr> consecutivi senza pxl */

table[width="910"] > tbody > tr > td:has(> img[src*="pxl.png"]) {

  height: 30px;

  line-height: 0;

  font-size: 0;

  padding: 0;

  vertical-align: top;

  box-sizing: border-box;

}



table[width="910"] > tbody > tr > td:has(> img[src*="pxl.png"]) > img[src*="pxl.png"] {

  display: block;

  width: 1px !important;

  min-width: 1px;

  height: 30px !important;

  min-height: 30px !important;

  max-height: 30px !important;

  margin: 0 auto;

  box-sizing: border-box;

}



table[width="910"] > tbody > tr:has(> td > img[src*="imgs/work/"]) + tr:has(> td > img[src*="imgs/work/"]) > td > img {

  display: block;

  margin-top: 30px;

}



table[width="910"] > tbody > tr:has(> td > img[src*="/Vogue/"]) + tr:has(> td > img[src*="/Vogue/"]) > td > img,

table[width="910"] > tbody > tr:has(> td > img[src*="/Vanity/"]) + tr:has(> td > img[src*="/Vanity/"]) > td > img,

table[width="910"] > tbody > tr:has(> td > img[src*="/Wired/"]) + tr:has(> td > img[src*="/Wired/"]) > td > img {

  display: block;

  margin-top: 30px;

}



/* Schede progetto: respiro verticale tra blocchi immagine/video (come riga pxl 30px) */

/* Griglia: overlay ::after con stroke (inset su img non è affidabile nei browser) */

table[width="910"] td.portfolio-work-item {

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  grid-template-rows: minmax(0, auto);

  justify-items: center;

  padding: 0 0 30px 0;

  vertical-align: top;

  position: relative;

}



table[width="910"] td.portfolio-work-item--last {

  padding-bottom: 0;

}



table[width="910"] td.portfolio-work-item img:not([src*="pxl.png"]),

table[width="910"] td.portfolio-work-item video {

  display: block;

  width: 100%;

  max-width: 910px;

  height: auto;

  margin: 0;

  box-sizing: border-box;

  grid-area: 1 / 1;

  position: relative;

  z-index: 0;

}



table[width="910"] td.portfolio-work-item::after {

  content: "";

  grid-area: 1 / 1;

  align-self: stretch;

  justify-self: stretch;

  width: 100%;

  max-width: 910px;

  margin: 0;

  box-shadow: inset 0 0 0 1px #b6b6b6;

  pointer-events: none;

  z-index: 1;

}



table[width="910"] td.portfolio-work-item--frame-8::after {

  box-shadow: inset 0 0 0 1px #b6b6b6, inset 0 0 0 8px #d6d6d6;

}



/* Immersive Storytelling: video solo su mobile (nascosto su desktop) */

tr.portfolio-work-row--mobile-only {

  display: none;

}



/* TNY Festival: due file video (desktop / mobile), stesso slot della griglia */

table[width="910"] td.portfolio-work-item video.portfolio-work-video--mobile {

  display: none;

}



@media screen and (max-width: 768px) {

  table[width="910"] td.portfolio-work-item video.portfolio-work-video--desktop {

    display: none !important;

  }



  table[width="910"] td.portfolio-work-item video.portfolio-work-video--mobile {

    display: block !important;

  }



  tr.portfolio-work-row--desktop-only {

    display: none !important;

  }



  tr.portfolio-work-row--mobile-only {

    display: table-row !important;

  }

}



/* Pagine interne progetto: 24px tra ultimo contenuto e footer (l’index ha colspan="5" sulla stessa cella) */

td.portfolio-bottom-wrap:not([colspan]) {

  padding-top: 24px;

}



/* Sotto i 500px: nome 38px, statement tagline 34px */

@media screen and (max-width: 499px) {

  .portfolio-top__kicker {

    font-size: 38px;

    line-height: 48px;

  }



  .portfolio-top__sep {

    display: none !important;

  }



  .portfolio-top__name {

    display: block;

    font-size: 38px;

    line-height: 42px;

    font-weight: 400;

  }



  .portfolio-top__role {

    display: block;

    font-size: 34px;

    line-height: 44px;

    font-weight: 300;

    margin-top: 8px;

  }

}



/* Tablet: header su due livelli, statement 34px (non sovrascrive le regole ≤499px) */

@media screen and (max-width: 768px) and (min-width: 500px) {

  .portfolio-top__sep {

    display: none !important;

  }



  .portfolio-top__name {

    display: block;

    font-size: 38px;

    line-height: 42px;

    font-weight: 400;

  }



  .portfolio-top__role {

    display: block;

    margin-top: 10px;

    font-size: 34px;

    line-height: 44px;

    font-weight: 300;

  }

}



@media screen and (max-width: 768px) {

  html {

    -webkit-text-size-adjust: 100%;

    text-size-adjust: 100%;

    overflow-x: hidden;

  }



  body {

    margin: 0;

    padding: 0;

    min-width: 0;

    max-width: 100%;

    overflow-x: hidden;

    position: relative;

  }



  .portfolio-top__visual-bleed {

    width: calc(100% + 48px);

    max-width: none;

    margin-left: -24px;

    margin-right: -24px;

  }



  .portfolio-top__visual-bleed .portfolio-top__visual {

    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    aspect-ratio: 540 / 356;

    margin: 0 !important;

  }



  /* Home: pattern top_visual — altezza fissa mobile (schiacciata, poco visibile) */

  .portfolio-top:not(.portfolio-top--project) .portfolio-top__visual-bleed .portfolio-top__visual {

    height: 120px !important;

    aspect-ratio: unset !important;

    object-fit: fill;

    object-position: center;

  }



  .portfolio-top--project .portfolio-top__visual-bleed .portfolio-top__visual {

    aspect-ratio: 540 / 30;

  }



  .portfolio-top__kicker {

    padding: 32px 2px;

  }



  /* Interne: evita doppio spazio (margin nome + padding kicker) tra Mary Telari e strip — come la home */

  header.portfolio-top--project .portfolio-top__name {

    margin-bottom: 0;

  }



  .portfolio-top__nav {

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 8px;

    line-height: 1.3;

    padding: 0;

    font-size: 14px;

  }



  .portfolio-top__nav-group {

    line-height: 1.3;

  }



  .portfolio-top__nav .portfolio-top__linksep {

    padding: 0 4px;

  }



  .mobile-quicknav {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    justify-content: center;

    align-items: stretch;

    width: 100%;

    max-width: 100%;

    margin: 0 0 24px;

    padding: 0;

    box-sizing: border-box;

  }



  .mobile-quicknav a {

    flex: 1 1 calc(50% - 4px);

    min-width: 120px;

    text-align: center;

    padding: 12px 10px;

    background: #ececec;

    border: 1px solid #c8c8c8;

    border-radius: 6px;

    color: #333;

    text-decoration: none;

    font: 600 14px/1.2 Arial, Helvetica, sans-serif;

  }



  .mobile-quicknav a:active {

    background: #ddd;

  }



  /* Guscio esterno a tre colonne */

  body > table[width="100%"] {

    width: 100% !important;

    max-width: 100%;

    table-layout: fixed;

    overflow-x: hidden;

  }



  body > table[width="100%"] > tbody > tr > td:first-child,

  body > table[width="100%"] > tbody > tr > td:last-child {

    display: none !important;

  }



  body > table[width="100%"] > tbody > tr > td[width="910"] {

    display: block;

    width: 100% !important;

    max-width: 100%;

    height: auto !important;

    padding-left: 20px;

    padding-right: 20px;

    box-sizing: border-box;

  }



  /* Spazio tra fascia header (verde su index) e contenuto / griglia card */

  body > table[width="100%"] > tbody > tr:nth-child(2) > td[width="910"] {

    margin-top: 24px;

  }



  /* Index: tolto il margine 24px tra header e griglia; striscia verde sul giunto */

  body > table[width="100%"] > tbody > tr:nth-child(2) > td[width="910"]:has(.portfolio-featured-grid) {

    margin-top: 0;

    background-image: linear-gradient(to bottom, var(--portfolio-green) 0, var(--portfolio-green) 16px, transparent 16px);

    background-repeat: no-repeat;

  }



  body > table[width="100%"] img[width="910"]:not(.portfolio-top__visual) {

    width: 100% !important;

    height: auto !important;

    max-width: 100%;

    margin: 0 auto;

    display: block;

  }



  body > table[width="100%"] table[width="910"] {

    width: 100% !important;

    max-width: 100%;

    margin: 0 auto;

  }



  /* Griglia portfolio: 5 colonne → una colonna */

  body > table[width="100%"] table[width="910"] > tbody > tr > td[width="29"] {

    display: none !important;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td[width="284"] {

    display: block !important;

    width: 100% !important;

    max-width: 100%;

    margin-left: 0;

    margin-right: 0;

    height: auto !important;

    padding: 0;

    text-align: center;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td[width="284"] .portfolio-card {

    max-width: 100%;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td[width="284"] img {

    width: 100% !important;

    max-width: 100%;

    height: auto !important;

    margin: 0 auto;

    display: block;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td[width="284"] img[src*="pxl.png"] {

    height: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    opacity: 0;

    overflow: hidden;

  }



  /* Spaziatori senza link: fuori dal flusso così le card hanno sempre 24px tra loro */

  body > table[width="100%"] table[width="910"] > tbody > tr > td[width="284"]:not(:has(a[href])) {

    display: none !important;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td[width="284"]:has(a[href]) {

    margin-bottom: 24px;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td[colspan="5"] {

    display: block;

    width: 100% !important;

    height: auto !important;

    padding: 0;

  }



  /* Spazio dopo le due card featured: lo spaziatore tabellare è nascosto su mobile */

  .portfolio-featured-grid {

    margin-bottom: 24px;

  }



  .portfolio-featured-grid tbody tr {

    display: flex;

    flex-direction: column;

    gap: 2px;

  }



  .portfolio-featured-grid__cell,

  .portfolio-featured-grid__cell--gap,

  .portfolio-featured-grid__cell--tnyf,

  .portfolio-featured-grid__cell--vogue,

  .portfolio-featured-grid__cell--vf,

  .portfolio-featured-grid__cell--alfa,

  .portfolio-featured-grid__cell--vw {

    display: block !important;

    width: 100vw !important;

    max-width: 100vw;

    margin-left: calc(50% - 50vw) !important;

    margin-right: calc(50% - 50vw) !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    box-sizing: border-box;

  }



  .portfolio-featured-grid .portfolio-card__media--dual:not(.portfolio-card__media--dual-vs-mob) img {

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

    object-position: center center;

  }



  /* TNY featured: titolo desktop nascosto su mobile */

  .portfolio-featured-grid__cell--tnyf .portfolio-card__title--featured-desktop,

  .portfolio-featured-grid__cell--vogue .portfolio-card__title--featured-desktop,

  .portfolio-featured-grid__cell--vf .portfolio-card__title--featured-desktop,

  .portfolio-featured-grid__cell--alfa .portfolio-card__title--featured-desktop,

  .portfolio-featured-grid__cell--vw .portfolio-card__title--featured-desktop {

    display: none !important;

  }



  /* Featured mobile: frame grigio + immagine intera */

  .portfolio-card__media--dual-vs-mob,

  .portfolio-card__media--dual-tnyf-mob,

  .portfolio-card__media--dual-vogue-alt,

  .portfolio-card__media--dual-vf-alt,

  .portfolio-card__media--dual-alfa-alt,

  .portfolio-card__media--dual-vw-alt {

    display: block;

    position: relative;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    box-sizing: border-box;

    padding: 8px;

    background-color: #d6d6d6;

    line-height: 0;

  }



  /* Stack in flow: altezza dall'img base (fix Safari iOS — no height:100% su picture assoluti) */

  .portfolio-card__media--dual-vs-mob .portfolio-card__dual-stack,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__dual-stack,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__dual-stack,

  .portfolio-card__media--dual-vf-alt .portfolio-card__dual-stack,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__dual-stack,

  .portfolio-card__media--dual-vw-alt .portfolio-card__dual-stack {

    position: relative;

    width: 100%;

    height: auto;

    aspect-ratio: auto;

    overflow: hidden;

    background-color: #e7e7e7;

  }



  /* Mobile: mantieni stroke 1px (::before); nascondi solo il frame hover (::after) */

  .portfolio-card__media--dual-vs-mob .portfolio-card__dual-stack::after,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__dual-stack::after,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__dual-stack::after,

  .portfolio-card__media--dual-vf-alt .portfolio-card__dual-stack::after,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__dual-stack::after,

  .portfolio-card__media--dual-vw-alt .portfolio-card__dual-stack::after {

    display: none;

  }



  .portfolio-card__media--dual-vs-mob .portfolio-card__dual-stack::before,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__dual-stack::before,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__dual-stack::before,

  .portfolio-card__media--dual-vf-alt .portfolio-card__dual-stack::before,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__dual-stack::before,

  .portfolio-card__media--dual-vw-alt .portfolio-card__dual-stack::before {

    content: "";

    display: block;

    position: absolute;

    inset: 0;

    z-index: 3;

    box-shadow: inset 0 0 0 1px #b6b6b6;

    pointer-events: none;

  }



  .portfolio-card__media--dual-vs-mob .portfolio-card__dual-stack picture.portfolio-card__thumb--base,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__dual-stack picture.portfolio-card__thumb--base,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__dual-stack picture.portfolio-card__thumb--base,

  .portfolio-card__media--dual-vf-alt .portfolio-card__dual-stack picture.portfolio-card__thumb--base,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__dual-stack picture.portfolio-card__thumb--base,

  .portfolio-card__media--dual-vw-alt .portfolio-card__dual-stack picture.portfolio-card__thumb--base {

    position: relative;

    display: block;

    width: 100%;

    height: auto !important;

    max-width: 100% !important;

    margin: 0;

    line-height: 0;

    z-index: 0;

  }



  .portfolio-card__media--dual-vs-mob .portfolio-card__dual-stack picture.portfolio-card__thumb--color,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__dual-stack picture.portfolio-card__thumb--color,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__dual-stack picture.portfolio-card__thumb--color,

  .portfolio-card__media--dual-vf-alt .portfolio-card__dual-stack picture.portfolio-card__thumb--color,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__dual-stack picture.portfolio-card__thumb--color,

  .portfolio-card__media--dual-vw-alt .portfolio-card__dual-stack picture.portfolio-card__thumb--color {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    margin: 0;

    display: block;

    line-height: 0;

    z-index: 1;

    opacity: 0;

    transition: opacity 0.2s ease;

  }



  .portfolio-featured-grid .portfolio-card__media--dual-vs-mob picture.portfolio-card__thumb--base img,

  .portfolio-featured-grid .portfolio-card__media--dual-vogue-alt picture.portfolio-card__thumb--base img,

  .portfolio-featured-grid .portfolio-card__media--dual-vf-alt picture.portfolio-card__thumb--base img,

  .portfolio-featured-grid .portfolio-card__media--dual-alfa-alt picture.portfolio-card__thumb--base img,

  .portfolio-featured-grid .portfolio-card__media--dual-vw-alt picture.portfolio-card__thumb--base img {

    display: block !important;

    position: static !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    aspect-ratio: 531 / 667;

    object-fit: contain !important;

    object-position: center top;

    margin: 0 !important;

  }



  .portfolio-featured-grid .portfolio-card__media--dual-tnyf-mob picture.portfolio-card__thumb--base img {

    display: block !important;

    position: static !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    aspect-ratio: 750 / 942;

    object-fit: contain !important;

    object-position: center top;

    margin: 0 !important;

  }



  .portfolio-featured-grid .portfolio-card__media--dual-vs-mob picture.portfolio-card__thumb--color img,

  .portfolio-featured-grid .portfolio-card__media--dual-tnyf-mob picture.portfolio-card__thumb--color img,

  .portfolio-featured-grid .portfolio-card__media--dual-vogue-alt picture.portfolio-card__thumb--color img,

  .portfolio-featured-grid .portfolio-card__media--dual-vf-alt picture.portfolio-card__thumb--color img,

  .portfolio-featured-grid .portfolio-card__media--dual-alfa-alt picture.portfolio-card__thumb--color img,

  .portfolio-featured-grid .portfolio-card__media--dual-vw-alt picture.portfolio-card__thumb--color img {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    object-fit: contain !important;

    object-position: center top;

    margin: 0 !important;

  }



  .portfolio-card--wide .portfolio-card__link:hover .portfolio-card__media--dual-vs-mob picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:focus-visible .portfolio-card__media--dual-vs-mob picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:hover .portfolio-card__media--dual-tnyf-mob picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:focus-visible .portfolio-card__media--dual-tnyf-mob picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:hover .portfolio-card__media--dual-vogue-alt picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:focus-visible .portfolio-card__media--dual-vogue-alt picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:hover .portfolio-card__media--dual-vf-alt picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:focus-visible .portfolio-card__media--dual-vf-alt picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:hover .portfolio-card__media--dual-alfa-alt picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:focus-visible .portfolio-card__media--dual-alfa-alt picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:hover .portfolio-card__media--dual-vw-alt picture.portfolio-card__thumb--color,

  .portfolio-card--wide .portfolio-card__link:focus-visible .portfolio-card__media--dual-vw-alt picture.portfolio-card__thumb--color {

    opacity: 1;

  }



  .portfolio-card__media--dual-vs-mob .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-vf-alt .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-vw-alt .portfolio-card__title--vs-overlay {

    position: absolute;

    bottom: 28px;

    left: 24px;

    right: auto;

    z-index: 5;

    width: auto;

    max-width: none;

    box-sizing: border-box;

    background-color: transparent;

    padding: 0;

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

  }



  .portfolio-card__media--dual-vs-mob .portfolio-card__title--vs-overlay .portfolio-card__title-line,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__title--vs-overlay .portfolio-card__title-line,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__title--vs-overlay .portfolio-card__title-line,

  .portfolio-card__media--dual-vf-alt .portfolio-card__title--vs-overlay .portfolio-card__title-line,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__title--vs-overlay .portfolio-card__title-line,

  .portfolio-card__media--dual-vw-alt .portfolio-card__title--vs-overlay .portfolio-card__title-line {

    display: inline-block;

    width: auto;

    background-color: var(--portfolio-green);

    padding: 6px 12px;

    line-height: 1.2;

    white-space: nowrap;

  }



  .portfolio-card__media--dual-vs-mob .portfolio-card__title--vs-overlay .portfolio-card__title-line + .portfolio-card__title-line,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__title--vs-overlay .portfolio-card__title-line + .portfolio-card__title-line,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__title--vs-overlay .portfolio-card__title-line + .portfolio-card__title-line,

  .portfolio-card__media--dual-vf-alt .portfolio-card__title--vs-overlay .portfolio-card__title-line + .portfolio-card__title-line,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__title--vs-overlay .portfolio-card__title-line + .portfolio-card__title-line,

  .portfolio-card__media--dual-vw-alt .portfolio-card__title--vs-overlay .portfolio-card__title-line + .portfolio-card__title-line {

    margin-left: 0;

  }



  .portfolio-card__title {

    font-size: 20px;

  }



  .portfolio-card__media--dual-vs-mob .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-tnyf-mob .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-vogue-alt .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-vf-alt .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-alfa-alt .portfolio-card__title--vs-overlay,

  .portfolio-card__media--dual-vw-alt .portfolio-card__title--vs-overlay {

    font-size: 26px;

  }



  .portfolio-featured-grid__cell--tnyf .portfolio-card__title--featured-mobile,

  .portfolio-featured-grid__cell--vogue .portfolio-card__title--featured-mobile,

  .portfolio-featured-grid__cell--vf .portfolio-card__title--featured-mobile,

  .portfolio-featured-grid__cell--alfa .portfolio-card__title--featured-mobile,

  .portfolio-featured-grid__cell--vw .portfolio-card__title--featured-mobile {

    display: inline-flex;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-bottom-wrap:not([colspan]) {

    display: block;

    width: 100% !important;

    height: auto !important;

    padding: 24px 0 0;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td[colspan="5"]:not(:has(.portfolio-card__media--dual)) img {

    width: 100% !important;

    max-width: 100%;

    height: auto !important;

    display: block;

    margin: 0 auto;

  }



  .portfolio-bottom-bleed {

    width: calc(100% + 48px);

    max-width: none;

    margin-left: -24px;

    margin-right: -24px;

  }



  .portfolio-bottom-bleed .portfolio-bottom__img {

    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    display: block;

    margin: 0 !important;

  }



  .portfolio-bottom-wrap,

  .portfolio-bottom-bleed,

  .portfolio-bottom-bleed picture {

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

  }



  /* Schede progetto / profile */

  .title_work {

    font-size: 32px !important;

    line-height: 40px !important;

    display: block;

    padding: 10px 0 6px;

  }



  .txt_work,

  .txt_work span {

    font-size: 14px !important;

    line-height: 20px !important;

  }



  .portfolio-work-intro .txt_work,

  .portfolio-work-intro .txt_work span:not(.txt_work_bold),

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work,

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work span:not(.txt_work_bold) {

    font-size: 18px !important;

    line-height: 26px !important;

    font-weight: 300 !important;

  }



  .portfolio-work-intro .txt_work_bold,

  .portfolio-work-intro .txt_work .txt_work_bold,

  .portfolio-work-intro .txt_work span.txt_work_bold,

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work_bold,

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work .txt_work_bold,

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work span.txt_work_bold {

    font-size: 18px !important;

    line-height: 26px !important;

    font-weight: 600 !important;

  }



  .portfolio-work-intro .txt_work a:link,

  .portfolio-work-intro .txt_work a:visited,

  .portfolio-work-intro .txt_work a:hover,

  .portfolio-work-intro .txt_work a:active,

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work a:link,

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work a:visited,

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work a:hover,

  table[width="910"] > tbody > tr:has(> td.title_work) + tr > td .txt_work a:active {

    font-size: 18px !important;

    line-height: 26px !important;

    font-weight: 600 !important;

  }



  td p.txt_work {

    margin: 0.55em 0 !important;

  }



  table[width="910"] td {

    word-wrap: break-word;

    overflow-wrap: break-word;

  }



  table[width="910"] img:not([src*="pxl.png"]) {

    max-width: 100%;

    height: auto;

  }



  table[width="910"] > tbody > tr > td:has(> img[src*="pxl.png"]) {

    height: 30px !important;

  }



  table[width="910"] > tbody > tr > td:has(> img[src*="pxl.png"]) > img[src*="pxl.png"] {

    height: 30px !important;

    min-height: 30px !important;

    max-height: 30px !important;

  }



  /* Load more: su mobile occupa tutta la larghezza; il bottone resta centrato nel flex interno */

  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-load-more-wrap[colspan="5"] {

    padding: 14px 0 24px;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-load-more-wrap[colspan="5"] .portfolio-load-more-inner {

    width: 100%;

    max-width: 100%;

  }



  /* Clients: il td[colspan="5"] generico (padding:0) annulla il padding della cella — stessa specificità del load more */

  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-clients-wrap[colspan="5"] {

    padding: 40px 0 40px;

    box-sizing: border-box;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-home-close-wrap[colspan="5"],

  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-home-close-wrap:not([colspan]) {

    padding: 0 0 32px;

    box-sizing: border-box;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-home-close-wrap[colspan="5"]::before,

  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-home-close-wrap:not([colspan])::before {

    content: "";

    display: block;

    width: 100%;

    height: 1px;

    background-color: #c8c8c8;

    margin: 24px 0;

  }



  /* TNY Festival: video a tutta larghezza utile; divider largo come footer */

  body.portfolio-work-wide .tnyf-watch-video {

    width: 100%;

    max-width: 910px;

    margin-left: auto;

    margin-right: auto;

    border-bottom: 0;

    box-sizing: border-box;

  }



  body.portfolio-work-wide table[width="910"] > tbody > tr:has(> td .tnyf-watch-video) > td {

    position: relative;

  }



  body.portfolio-work-wide table[width="910"] > tbody > tr:has(> td .tnyf-watch-video) > td::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    width: calc(100% + 48px);

    height: 1px;

    background-color: #c8c8c8;

    box-sizing: border-box;

  }



  body.portfolio-work-wide table[width="910"] > tbody > tr:has(> td .tnyf-watch-video) + tr > td.portfolio-home-close-wrap::before {

    display: none;

  }



  .portfolio-home-close {

    padding-left: 0;

    padding-right: 0;

    padding-top: 0;

    padding-bottom: 40px;

    border-top: 0;

  }



  /* Projects: card dual (VS + TNY) — stesse dimensioni delle altre card (284×185) su mobile */

  body.portfolio-projects-page .portfolio-projects-table td[width="284"] .portfolio-card--projects-dual {

    max-width: 100% !important;

    width: 100% !important;

  }



  body.portfolio-projects-page .portfolio-card--projects-dual .portfolio-card__media.portfolio-card__media--dual {

    max-width: 100% !important;

    width: 100% !important;

  }



  body.portfolio-projects-page .portfolio-card--projects-dual .portfolio-card__dual-stack {

    display: block;

    width: 100%;

    max-width: 100%;

    aspect-ratio: 284 / 185;

    height: auto;

    position: relative;

    overflow: hidden;

  }



  body.portfolio-projects-page .portfolio-card--projects-dual img.portfolio-card__thumb--base {

    display: block !important;

    position: relative !important;

    z-index: 0;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    aspect-ratio: 284 / 185 !important;

    object-fit: cover !important;

    margin: 0 auto !important;

    inset: auto !important;

    left: auto !important;

    top: auto !important;

    right: auto !important;

    bottom: auto !important;

  }



  body.portfolio-projects-page .portfolio-card--projects-dual img.portfolio-card__thumb--color {

    position: absolute !important;

    inset: 0;

    z-index: 1;

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    object-fit: cover !important;

    aspect-ratio: auto !important;

    opacity: 0;

    transition: opacity 0.2s ease;

  }



  body.portfolio-projects-page .portfolio-card--projects-dual .portfolio-card__link:hover img.portfolio-card__thumb--color,

  body.portfolio-projects-page .portfolio-card--projects-dual .portfolio-card__link:focus-visible img.portfolio-card__thumb--color {

    opacity: 1;

  }

}



/* Strettezza tipo iPhone 375px: meno spazio attorno ai | nel menu sotto il visual + un filo più di larghezza utile */

@media screen and (max-width: 420px) {

  body > table[width="100%"] > tbody > tr > td[width="910"] {

    padding-left: 16px;

    padding-right: 16px;

  }



  .portfolio-top__nav .portfolio-top__linksep {

    padding: 0 2px;

  }

}



/* Home: load more + Clients (index) */

.portfolio-load-more-wrap {

  padding: 8px 0 18px;

  vertical-align: middle;

  text-align: center;

  box-sizing: border-box;

}



/* Larghezza colonna centrale griglia (284+29+284+29+284): blocco 284px centrato = allineato alla card centrale */

.portfolio-load-more-inner {

  width: 284px;

  max-width: 100%;

  margin-left: auto;

  margin-right: auto;

  display: flex;

  justify-content: center;

  align-items: center;

  box-sizing: border-box;

}



.portfolio-load-more {

  display: inline-block;

  margin: 0;

  padding: 6px 8px;

  max-width: 100%;

  box-sizing: border-box;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: #444;

  background: transparent;

  border: 1px solid #3a3a3a;

  border-radius: 0;

  cursor: pointer;

  -webkit-appearance: none;

  appearance: none;

}



.portfolio-load-more:hover,

.portfolio-load-more:focus-visible {

  color: #333;

  outline: none;

}



.portfolio-load-more:focus-visible {

  outline: 2px solid #b2d235;

  outline-offset: 2px;

  box-shadow: none;

}



a.portfolio-load-more,

a.portfolio-load-more:link,

a.portfolio-load-more:visited {

  color: #444;

  text-decoration: none;

}



a.portfolio-load-more:hover,

a.portfolio-load-more:focus-visible {

  color: #333;

  text-decoration: none;

}



body.portfolio-home-alt .portfolio-load-more-wrap--featured-alt {

  padding: 24px 0 24px;

  text-align: center;

}



body.portfolio-home-alt .portfolio-load-more-wrap--featured-alt .portfolio-load-more-inner {

  width: 284px;

  max-width: 100%;

}



/* Pagina Projects: griglia completa, card uniformi 284px × 3 colonne */

.portfolio-projects-after-grid {

  padding: 0;

  vertical-align: top;

  line-height: 0;

}



.portfolio-projects-after-grid img {

  display: block;

}



body.portfolio-projects-page td.portfolio-bottom-wrap[colspan="5"] {

  padding-top: 24px;

}



body.portfolio-projects-page .portfolio-projects-grid .portfolio-card {

  max-width: 284px;

  width: 100%;

}



body.portfolio-projects-page .portfolio-projects-grid .portfolio-card--wide {

  max-width: 284px;

}



body.portfolio-projects-page .portfolio-card--projects-dual .portfolio-card__dual-stack {

  aspect-ratio: 284 / 185;

}



body.portfolio-projects-page .portfolio-card--projects-dual .portfolio-card__media--dual {

  max-width: 284px;

}



body.portfolio-projects-page .portfolio-projects-table {

  width: 100%;

  max-width: 910px;

  margin: 0 auto;

}



@media screen and (min-width: 910px) {

  body.portfolio-projects-page .portfolio-projects-table {

    max-width: 100%;

  }

}



body.portfolio-projects-page .portfolio-projects-grid > tr:first-child > td {

  padding-top: 24px;

}



/* Homepage alternativa (index_alt): featured a 2 colonne come index */

body.portfolio-home-alt td.portfolio-home-alt-wrap {

  padding: 0 0 36px;

  vertical-align: top;

  text-align: left;

}



.portfolio-home-alt-featured {

  margin: 0;

  text-align: left;

}



.portfolio-home-alt-featured .portfolio-clients__title {

  margin: 0 0 32px;

}



body.portfolio-home-alt .portfolio-featured-grid {

  width: 100%;

  max-width: 910px;

  margin: 0 auto;

}



body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-home-alt-wrap[colspan="5"] + tr > td.portfolio-clients-divider-cell {

  padding-top: 0;

}



/* Homepage desktop: riga spaziatrice interna + featured a tutta larghezza utile */

@media screen and (min-width: 769px) {

  body.portfolio-home-alt table[width="910"] > tbody > tr:first-child:has(> td[width="284"] > img[src*="pxl.png"]) {

    display: none;

  }



  body.portfolio-home-alt .portfolio-featured-grid {

    max-width: 100%;

    margin-left: 0;

    margin-right: 0;

  }



  body.portfolio-home-alt .portfolio-home-alt-featured {

    padding-top: 36px;

  }

}



@media screen and (max-width: 768px) {

  /* index_alt: niente striscia verde sul giunto header/griglia; titolo su sfondo pagina */

  body.portfolio-home-alt > table[width="100%"] > tbody > tr:nth-child(2) > td[width="910"]:has(.portfolio-featured-grid) {

    background-image: none;

    margin-top: 24px;

  }



  body.portfolio-home-alt td.portfolio-home-alt-wrap {

    padding-bottom: 0;

  }



  body > table[width="100%"] table[width="910"] > tbody > tr > td.portfolio-home-alt-wrap[colspan="5"] {

    padding-left: 0;

    padding-right: 0;

    box-sizing: border-box;

  }



  /* Stessa larghezza utile di Clients / Contact (padding 20px sul td esterno) */

  body.portfolio-home-alt .portfolio-featured-grid__cell,

  body.portfolio-home-alt .portfolio-featured-grid__cell--gap,

  body.portfolio-home-alt .portfolio-featured-grid__cell--tnyf,

  body.portfolio-home-alt .portfolio-featured-grid__cell--vogue,

  body.portfolio-home-alt .portfolio-featured-grid__cell--vf,

  body.portfolio-home-alt .portfolio-featured-grid__cell--alfa,

  body.portfolio-home-alt .portfolio-featured-grid__cell--vw {

    width: 100% !important;

    max-width: 100%;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }



  body.portfolio-home-alt .portfolio-home-alt-featured #portfolio-home-alt-featured-heading {

    display: block;

    margin: 0 0 32px;

    padding: 0;

    background: transparent;

    color: #111;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 0.02em;

  }



  /* Spazio verticale uniforme 24px tra tutte le card (niente padding-top sulle celle delle righe 2+) */

  body.portfolio-home-alt .portfolio-featured-grid tbody {

    display: flex;

    flex-direction: column;

    gap: 24px;

  }



  body.portfolio-home-alt .portfolio-featured-grid tbody tr {

    display: flex;

    flex-direction: column;

    gap: 24px;

  }



  body.portfolio-home-alt .portfolio-featured-grid tbody tr + tr .portfolio-featured-grid__cell {

    padding-top: 0 !important;

  }



  /* Divider featured → Clients: su mobile la riga <tr> con <hr> non si vede (td display:block); linea sulla section */

  body.portfolio-home-alt .portfolio-home-alt-featured::after {

    content: "";

    display: block;

    width: 100%;

    height: 1px;

    background-color: #c8c8c8;

    margin: 0;

  }



  body.portfolio-home-alt .portfolio-featured-grid {

    margin-bottom: 0;

  }



  body.portfolio-home-alt .portfolio-load-more-wrap--featured-alt {

    padding: 24px 0 24px;

  }



  body.portfolio-home-alt .portfolio-load-more-wrap--featured-alt .portfolio-load-more-inner {

    width: 100%;

    max-width: 100%;

  }



  body.portfolio-home-alt td.portfolio-clients-divider-cell {

    display: none !important;

    height: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;

    overflow: hidden !important;

  }

}



.portfolio-clients-divider-cell {

  padding: 0;

  vertical-align: top;

}



.portfolio-clients-divider {

  border: 0;

  height: 1px;

  margin: 0;

  background: #c8c8c8;

}



.portfolio-clients-wrap {

  padding: 36px 0 48px;

  vertical-align: top;

}



.portfolio-clients {

  margin: 0;

  text-align: left;

}



.portfolio-clients__title {

  margin: 0 0 20px;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

  font-size: 18px;

  font-weight: 600;

  letter-spacing: 0.02em;

  color: #111;

}



.portfolio-clients__list {

  margin: 0;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

  font-size: 44px;

  font-weight: 300;

  line-height: 1.25;

  letter-spacing: -0.02em;

  color: #111;

  overflow-wrap: break-word;

}



@media screen and (max-width: 768px) {

  .portfolio-clients__list {

    font-size: 32px;

    line-height: calc(1.25em + 2px);

    margin-bottom: 32px;

  }

}



/* Home: chiusura contact (stile allineato a Clients + mail verde brand) */

.portfolio-home-close-wrap {

  padding: 0;

  vertical-align: top;

  text-align: left;

  box-sizing: border-box;

}



.portfolio-home-close {

  margin: 0;

  padding: 36px 0 64px;

  border-top: 0;

  text-align: left;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

  position: relative;

  z-index: 0;

}



@media screen and (min-width: 769px) {

  .portfolio-home-close {

    border-top: 1px solid #c8c8c8;

  }

}



.portfolio-home-close__title {

  margin: 0;

  max-width: none;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

  font-size: 44px;

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: -0.02em;

  color: #111;

}



.portfolio-home-close__email {

  display: block;

  position: relative;

  z-index: 1;

  margin: 0;

  max-width: 100%;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

  font-size: 44px;

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: -0.02em;

  color: var(--portfolio-green);

  text-decoration: none;

  overflow-wrap: break-word;

  word-break: break-word;

  cursor: pointer;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.12);

  touch-action: manipulation;

}



/* Pagine interne: batte `a:link { font-size: 13px }` negli style inline — stessa dimensione della home */

.portfolio-home-close .portfolio-home-close__email:link,

.portfolio-home-close .portfolio-home-close__email:visited {

  font-size: 44px;

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: -0.02em;

}



.portfolio-home-close__email:hover,

.portfolio-home-close__email:focus-visible {

  color: #aab832;

  text-decoration: underline;

  text-underline-offset: 0.12em;

}



.portfolio-home-close__email:focus-visible {

  outline: 2px solid var(--portfolio-green);

  outline-offset: 4px;

}



@media screen and (max-width: 768px) {

  .portfolio-home-close__email {

    font-size: 32px;

    line-height: 1.1;

    letter-spacing: -0.03em;

    word-break: normal;

    overflow-wrap: normal;

  }



  .portfolio-home-close .portfolio-home-close__email:link,

  .portfolio-home-close .portfolio-home-close__email:visited {

    font-size: 32px;

    line-height: 1.1;

    letter-spacing: -0.03em;

  }

}