/* 08 · Print Design — per ogni progetto: nome, poi tutti gli elaborati (il primo grande,
   gli altri due per riga). Niente "Discover more" (scelta dell'utente, 18/09/2026).
   Alone bianco: stessa sfumatura della sezione 06 UX/UI (#f1f1ee, ellisse larga 105%,
   curva smootherstep, calotta alta come --mint-cap), come nella tavola originale:
   parte dagli elaborati dell'artbook, copre tutto Clout e torna nero prima di Fant Wenger.
   Clout Studio: progetto per SInessere (logo nero su trasparente, print/sinessere nero.png);
   nessun altro cliente citato per questo progetto (richiesta dell'utente, 18/09).
   File veri in ~/Desktop/progetti, copie con lo stesso nome in print/. */
.pd-host{display:contents}
#showcase-print{isolation:isolate;overflow-x:clip}
.pd-showcase{
  --pd-cap:clamp(300px,64vw,960px);
  --pd-cap-b:calc(var(--pd-cap)*.5); /* calotta inferiore: spazio Clout > Fant Wenger al 50 % (19/09, prima 70 %) */
  display:flex;flex-direction:column;
  width:100%;max-width:1100px;margin:clamp(2.5rem,6vw,5rem) auto 0;text-align:center}
.pd-project{display:flex;flex-direction:column;align-items:center;margin:0}
.pd-head{display:flex;flex-direction:column;align-items:center;gap:1rem}
.pd-eyebrow{color:rgba(255,255,255,.55);font-size:.67rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
/* nomi ridotti il 18/09 (prima clamp(2.3rem,5.6vw,4.4rem), troppo grandi per l'utente) */
.pd-name{margin:0;color:#fff;font-family:var(--font-outfit),sans-serif;font-size:clamp(1.65rem,3.3vw,2.6rem);font-weight:500;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.pd-credit{justify-content:center;margin:.15rem 0 0}
.pd-credit .pd-credit-logo--its{height:clamp(.7rem,1.15vw,.86rem)}
.pd-credit .pd-credit-logo--sin{height:clamp(.95rem,1.55vw,1.2rem)}

/* progetto sul bianco: testi scuri come .showcase-section--mint */
.pd-project--on-light .pd-eyebrow{color:rgba(9,9,9,.74)}
.pd-project--on-light .pd-name{color:#101010}
.pd-project--on-light .pd-credit{color:rgba(16,16,16,.66)}

/* elaborati */
.pd-works{display:flex;flex-direction:column;align-items:center;gap:clamp(2.6rem,6vw,5rem);width:100%;margin-top:clamp(2.6rem,6vw,4.6rem)}
.pd-lead{display:flex;justify-content:center;width:100%}
.pd-lead img{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(19rem,50vw,37rem)}
.pd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:clamp(2.6rem,6vw,5rem) clamp(1.5rem,4vw,3.5rem);width:100%}
.pd-grid img{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(15rem,30vw,24rem)}
.pd-grid img.pd-sm{max-width:62%}
.pd-grid img.pd-wide{grid-column:1/-1;max-height:clamp(17rem,36vw,28rem)}

/* artbook: i quattro mockup incrociati (18/09): copertina | pagine / pagine | copertina */

/* Clout: mockup originali su carta chiara (cartella Links del portfolio InDesign, 2024),
   al posto dei ritagli con fumo e ombre. Le copie in print/clout/ hanno la carta portata
   a #f1f1ee (correzione di circa il 2%, originali intatti in print/originali/clout/);
   i bordi sfumano nell'alone, cosi' non si vede il rettangolo dell'immagine. */
.pd-soft{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect}
/* 19/09: le copie web sono ritagliate sul mockup (prima il contenuto occupava il 35-70% del
   canvas e tutta la carta vuota rendeva gli elaborati piccoli e lontani). Ora riempiono la
   colonna centrale (max 1100px, i due margini della pagina) e le distanze sono ridotte.
   Portfolio (piu' piccolo nel suo file) ha la colonna un po' piu' stretta ma non minuscola. */
.pd-works--clout{gap:clamp(.25rem,1.2vw,1rem);margin-top:clamp(1.6rem,4vw,3rem)}
.pd-works--clout .pd-lead img{width:min(100%,940px);max-height:none}
.pd-works--clout .pd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.38fr);gap:clamp(.25rem,1.2vw,1rem) clamp(.5rem,2vw,1.5rem);align-items:center}
.pd-works--clout .pd-grid img{width:100%;max-height:none}
/* "Noi" + indice a onde: stesso ingombro del mockup Generiamo della riga sopra (richiesta 19/09):
   58% = 1.38/2.38, la larghezza della sua colonna, quindi resta uguale a ogni larghezza */
.pd-works--clout .pd-grid img.pd-wide{grid-column:1/-1;width:58%}

/* Fant Wenger: come la tavola scelta dall'utente (18/09). Uomo col manifesto a sinistra,
   alto quanto colophon + inviti impilati a destra (colonne 1.95:1 con uomo 1500x2000,
   colophon 1430x2000, inviti 1600x1847); dietro, solo gli inviti ingranditi in
   trasparenza che sfumano nel nero. Composizione uguale anche sul telefono. */
.pd-fw{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,1fr);align-items:start;column-gap:clamp(.9rem,3.5vw,3rem);width:min(100%,860px);margin-inline:auto;container-type:inline-size}
.pd-fw img{display:block;width:100%;height:auto}
.pd-fw-man img{opacity:.95;-webkit-mask-image:linear-gradient(#000 0,#000 74%,transparent 98%);mask-image:linear-gradient(#000 0,#000 74%,transparent 98%)}
.pd-fw-side>img,.pd-fw-inv>img{filter:brightness(.84)} /* stessa luce del manifesto con l uomo (alpha 88% x opacity .95 = ~.84 sul nero) */
.pd-fw-side{display:flex;flex-direction:column;gap:clamp(.8rem,2.6vw,2rem);margin-top:4.2%} /* = i 32px trasparenti sopra il manifesto nel file dell'uomo */
.pd-fw-inv{position:relative}
/* manifesto e colophon allineati in alto, come nella tavola.
   fantasma: solo il flyer. A sinistra resta agganciato al flyer in primo piano (-65.7%
   della sua larghezza, come nella tavola); a destra esce dal bordo della pagina e ne viene
   tagliato (il section ha overflow-x:clip), a ogni larghezza: (100vw - 100cqw)/2 e' lo
   spazio tra .pd-fw (container) e il bordo, 42% quanto sborda. L'altezza segue la
   larghezza: top tiene la scritta "FANT W" del fantasma a -47.6% dell'altezza del flyer
   (0.233 dell'altezza del fantasma = 0.269 della sua larghezza, flyer 1600x1847).
   Sfuma su tutti i lati visibili: in basso, a destra e con un rientro breve
   in alto e a sinistra, cosi nessun bordo dritto si legga come un taglio. */
.pd-fw-bg{position:absolute;z-index:-1;left:-65.7%;right:calc((100cqw - 100vw)/2 - 46%);top:calc(-82% - (100vw - 100cqw)*.1345);
  opacity:.07;transform:rotate(1deg);pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent 0,#000 13%,#000 40%,transparent 76%),linear-gradient(to right,transparent 0,#000 7%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent 0,#000 13%,#000 40%,transparent 76%),linear-gradient(to right,transparent 0,#000 7%,#000 80%,transparent 100%);
  mask-composite:intersect}

/* distanze tra i progetti */
.pd-project--clout{margin-top:clamp(6rem,13vw,10rem)}
.pd-project--frequency{margin-top:clamp(2.1rem,4.2vw,3.5rem)}

/* alone bianco: fascia a tutta larghezza dietro .pd-light, con calotta superiore e
   inferiore ad arco. Il bianco pieno inizia a meta' calotta; il padding tiene gli
   elaborati dentro la parte chiara e lascia alla sfumatura lo spazio per tornare al
   nero pieno prima di Fant Wenger (altrimenti la riga netta). Dal 18/09 i mockup di Clout
   hanno la carta opaca: il padding sotto (.44) li fa finire nel bianco pieno, prima della sfumatura. */
.pd-light{position:relative;z-index:0;width:100%;
  padding-top:calc(var(--pd-cap)*.2);padding-bottom:calc(var(--pd-cap-b)*.4);
  margin-bottom:calc(var(--pd-cap-b)*.08)}
.pd-light::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(var(--pd-cap)*-.1);bottom:calc(var(--pd-cap-b)*-.1);left:50%;width:100vw;margin-left:-50vw;
  background:
    radial-gradient(ellipse 105% 100% at 50% 100%,#f1f1ee 0,#f1f1ee 50%,rgba(241,241,238,0.999) 52.5%,rgba(241,241,238,0.991) 55.0%,rgba(241,241,238,0.973) 57.5%,rgba(241,241,238,0.942) 60.0%,rgba(241,241,238,0.896) 62.5%,rgba(241,241,238,0.837) 65.0%,rgba(241,241,238,0.765) 67.5%,rgba(241,241,238,0.683) 70.0%,rgba(241,241,238,0.593) 72.5%,rgba(241,241,238,0.500) 75.0%,rgba(241,241,238,0.407) 77.5%,rgba(241,241,238,0.317) 80.0%,rgba(241,241,238,0.235) 82.5%,rgba(241,241,238,0.163) 85.0%,rgba(241,241,238,0.104) 87.5%,rgba(241,241,238,0.058) 90.0%,rgba(241,241,238,0.027) 92.5%,rgba(241,241,238,0.009) 95.0%,rgba(241,241,238,0.001) 97.5%,rgba(241,241,238,0) 100%) 50% 0/100% var(--pd-cap) no-repeat,
    radial-gradient(ellipse 105% 100% at 50% 0,#f1f1ee 0,#f1f1ee 50%,rgba(241,241,238,0.999) 52.5%,rgba(241,241,238,0.991) 55.0%,rgba(241,241,238,0.973) 57.5%,rgba(241,241,238,0.942) 60.0%,rgba(241,241,238,0.896) 62.5%,rgba(241,241,238,0.837) 65.0%,rgba(241,241,238,0.765) 67.5%,rgba(241,241,238,0.683) 70.0%,rgba(241,241,238,0.593) 72.5%,rgba(241,241,238,0.500) 75.0%,rgba(241,241,238,0.407) 77.5%,rgba(241,241,238,0.317) 80.0%,rgba(241,241,238,0.235) 82.5%,rgba(241,241,238,0.163) 85.0%,rgba(241,241,238,0.104) 87.5%,rgba(241,241,238,0.058) 90.0%,rgba(241,241,238,0.027) 92.5%,rgba(241,241,238,0.009) 95.0%,rgba(241,241,238,0.001) 97.5%,rgba(241,241,238,0) 100%) 50% 100%/100% var(--pd-cap-b) no-repeat,
    linear-gradient(#f1f1ee,#f1f1ee) 50% calc(var(--pd-cap) - 2px)/100% calc(100% - var(--pd-cap) - var(--pd-cap-b) + 4px) no-repeat}
.pd-light .pd-works--artbook{margin-top:0}

@media (max-width:640px){
  .pd-grid{grid-template-columns:1fr}
  .pd-grid img,.pd-grid img.pd-wide{max-height:none}
  .pd-grid img.pd-sm{max-width:70%}
  .pd-works--clout .pd-grid{grid-template-columns:1fr}
  .pd-works--clout .pd-grid img:first-child{width:74%}
  .pd-works--clout .pd-grid img:nth-child(2){order:-1}
  .pd-works--clout .pd-grid img.pd-wide{width:100%}
}