/*
Theme Name: Pennagrafica
Theme URI: https://pennagrafica.it/
Author: Pennagrafica
Description: Tema tipografico essenziale per Pennagrafica. Bianco, nero, un accento. Costruito sui contenuti Gutenberg esistenti.
Version: 3.6.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pennagrafica
*/

/* ==========================================================================
   1. Token
   ========================================================================== */

:root{
  --paper:#fcfcfb;
  --ink:#000000;
  --grey:#6f6f6f;
  --rule:#dcdcdc;
  --tint:#f6f5f3;
  --accent:#fb5a59;

  --serif:"Bodoni Moda","Bodoni MT",Didot,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gutter:clamp(1.4rem,5vw,5.5rem);
  --band:clamp(4.5rem,11vw,9rem);
  --measure:62ch;

  /* Titoli. Il peso e il valore ottico si regolano da
     Personalizza -> Pennagrafica -> Tipografia; questi sono le ricadute. */
  --serif-weight:400;
  --display-opsz:26;

  /* Impostazioni del testo lungo. Il peso 300 e' sottile: se sui monitor
     Windows risultasse troppo esile, portarlo a 400 qui e basta. */
  --text-size:1rem;
  --text-leading:1.45;
  --text-weight:300;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* Optical sizing attivo: il browser sceglie il disegno del carattere in
     base al corpo. Sui testi piccoli le grazie si ispessiscono e la lettura
     migliora. */
  font-optical-sizing:auto;
}

a{color:inherit;text-decoration:none}
img,video,iframe{max-width:100%;height:auto;display:block}
figure{margin:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper);padding:.9rem 1.4rem;font-size:.95rem;
}
.skip-link:focus{left:0}

.wrap{padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.band-b{padding-bottom:var(--band)}

/* ==========================================================================
   3. Testata e navigazione
   ========================================================================== */

/* La testata e' fissa e si accorcia allo scorrimento. L'altezza da riservare
   in cima alla pagina la misura il JavaScript e la scrive in --header-h:
   il valore qui sotto e' solo la ricaduta se lo script non parte. */

:root{
  --header-h:6rem;
}

body{padding-top:var(--header-h)}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--paper);
  transition:box-shadow .22s ease;
}

.masthead{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding-block:clamp(1.5rem,3vw,2.5rem);
  transition:padding-block .22s ease;
}

/* Stato ridotto: compare dopo i primi pixel di scorrimento. */
.site-header.is-stuck{box-shadow:0 1px 0 var(--rule)}
.site-header.is-stuck .masthead{padding-block:.65rem}
.site-header.is-stuck .logo{font-size:.9rem}
.site-header.is-stuck .logo img{max-height:24px}

.logo{font-weight:500;font-size:1rem;letter-spacing:-.01em;transition:font-size .22s ease}
.logo i{display:inline-block;width:.4em;height:.4em;background:var(--accent);margin-left:.32em}
.logo img{max-height:34px;width:auto;transition:max-height .22s ease}

/* Menù, ricerca e tasto stanno insieme a destra del logo. */
.masthead-tools{
  display:flex;align-items:center;
  gap:clamp(1rem,2.4vw,2rem);
}

.nav ul{display:flex;gap:clamp(1.1rem,2.6vw,2.4rem);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{font-size:.95rem;color:var(--grey);transition:color .18s ease}

/* Passaggio del mouse e pagina in cui ci si trova: stesso colore. */
.nav a:hover,
.nav a:focus-visible,
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-parent > a,
.nav .current-page-ancestor > a{color:var(--accent)}

/* Il tasto del menù: un segno di uguale, centrato sul logo. */
.nav-toggle{
  display:none;
  background:none;border:0;padding:0 .2rem;margin:0;
  font-family:var(--sans);
  font-size:1.9rem;line-height:1;font-weight:400;
  color:var(--ink);cursor:pointer;
  transition:color .18s ease;
}
.nav-toggle:hover{color:var(--accent)}
.nav-toggle[aria-expanded="true"] span{font-size:1.6rem}

/* Ricerca ------------------------------------------------------------------ */

.search-toggle{
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;margin:0;
  color:var(--ink);cursor:pointer;
  transition:color .18s ease;
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"]{color:var(--accent)}

/* Il pannello sta dentro la testata, quindi scende sempre subito sotto,
   anche quando la testata si e' accorciata allo scorrimento. */
.search-panel{
  display:none;
  background:var(--paper);
  border-top:1px solid var(--rule);
  box-shadow:0 1px 0 var(--rule);
}
.search-panel.is-open{display:block}

.search-form{padding-block:clamp(1.2rem,3vw,2.2rem)}
.search-form input{
  width:100%;
  font-family:var(--serif);
  font-weight:var(--serif-weight);
  font-size:clamp(1.3rem,3.4vw,2.2rem);
  line-height:1.2;
  color:var(--ink);
  background:none;
  border:0;
  border-bottom:1px solid var(--rule);
  padding:.5rem 0;
}
.search-form input::placeholder{color:var(--faint,#c9c9c9)}
.search-form input:focus{outline:0;border-bottom-color:var(--accent)}

/* --------------------------------------------------------------------------
   Le aste leggere dei titoli molto grandi.

   Con optical sizing automatico un titolo da cento pixel prende il taglio
   da display, quello disegnato per il contrasto massimo: le aste leggere si
   riducono a un capello e sullo schermo tremolano.

   Qui l'asse ottico viene bloccato su un valore da testo, cosi' il disegno
   resta robusto anche in grande. Vale solo per i corpi maggiori: altrove
   l'automatismo lavora bene ed e' lasciato fare.

   Sui caratteri senza asse opsz (Libre Bodoni, Playfair) la riga viene
   semplicemente ignorata.
   -------------------------------------------------------------------------- */

.hero h1,
.entry-title,
.row-name,
.contact-mail,
.sectors,
.rel-name{
  font-variation-settings:"opsz" var(--display-opsz);
}

/* ==========================================================================
   4. Home
   ========================================================================== */

.hero{padding-top:clamp(3rem,11vw,9rem);padding-bottom:clamp(4rem,12vw,10rem)}
.hero h1{
  font-family:var(--serif);font-weight:var(--serif-weight);
  font-size:clamp(2.5rem,7.4vw,6.6rem);
  line-height:.98;letter-spacing:-.015em;margin:0;max-width:19ch;
}

/* Con lo showreel la frase di apertura resta della sua dimensione piena: il
   riquadro le sta accanto piccolo, appoggiato in basso sulla stessa linea.
   E' un invito, non un secondo protagonista. */
.hero.has-reel .hero-top{
  display:grid;
  grid-template-columns:60% 30%;
  column-gap:10%;
  align-items:end;
}

.reel{width:100%}

.reel-box{
  display:block;position:relative;width:100%;aspect-ratio:4/3;
  padding:0;border:0;margin:0;cursor:pointer;
  background:var(--tint);overflow:hidden;font:inherit;color:inherit;
}
.reel-bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  max-width:none;max-height:none;
}
.reel-face{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;gap:.7rem;
  padding:clamp(1rem,2vw,1.6rem);
  color:var(--paper);
  background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 55%);
}
.reel-play{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;flex:0 0 auto;
  border-radius:50%;background:var(--paper);color:var(--ink);
  transition:background .18s ease,color .18s ease;
}
.reel-label{font-size:.95rem;font-weight:500;line-height:2.6rem}
.reel-box:hover .reel-play{background:var(--accent);color:var(--paper)}

.reel-modal{
  border:0;padding:0;max-width:min(1200px,92vw);width:100%;
  background:var(--ink);color:var(--paper);
}
.reel-modal::backdrop{background:rgba(0,0,0,.88)}
.reel-modal video{width:100%;height:auto;max-height:86vh;display:block}
.reel-close{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  background:none;border:0;color:var(--paper);
  font:inherit;font-size:.9rem;cursor:pointer;padding:.5rem .8rem;
}
.reel-close:hover{color:var(--accent)}

.hero-foot{display:flex;gap:clamp(2rem,7vw,7rem);flex-wrap:wrap;margin-top:clamp(3rem,8vw,7rem)}
.hero-foot p{margin:0;max-width:44ch;font-size:1.05rem}
.hero-meta{font-size:.95rem;color:var(--grey);line-height:1.9}

.head{
  font-family:var(--serif);font-style:italic;font-weight:var(--serif-weight);
  font-size:clamp(1.35rem,2.3vw,1.85rem);
  margin:0 0 clamp(2.2rem,5vw,3.6rem);
}

/* Indice progetti ---------------------------------------------------------- */

.index{border-top:1px solid var(--rule)}

.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 20%;
  align-items:baseline;gap:1.5rem;
  padding-block:clamp(1.1rem,2.4vw,1.7rem);
  border-bottom:1px solid var(--rule);
}
.row-name{
  font-family:var(--serif);font-weight:var(--serif-weight);
  font-size:clamp(1.5rem,3.5vw,2.7rem);
  line-height:1.08;letter-spacing:-.01em;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
  transform-origin:left center;
}
.row-kind{color:var(--grey);font-size:.9rem;text-align:right}
.row-thumb{display:none}
span.row-thumb{background:var(--tint)}

/* Variante con le miniature: negli archivi, dove si scorre per cercare.
   La colonna e' larga quanto quella dei progetti simili sotto le schede,
   cosi' i due elenchi si somigliano invece di sembrare due componenti. */
.index-thumbs .row{
  grid-template-columns:120px minmax(0,1fr) 20%;
  align-items:center;
}
.index-thumbs .row-thumb{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* Miniature in bianco e nero, solo da desktop: l'elenco resta una lista da
   scorrere e il colore arriva con l'immagine grande al passaggio del mouse.
   Su schermo stretto no, perche' li' la miniatura e' l'unica immagine che
   si vede e toglierle il colore la impoverisce. */
@media (min-width:861px){
  .index-thumbs .row-thumb{
    filter:grayscale(1);
  }
}

@media (hover:hover) and (pointer:fine){
  .row:hover .row-name{transform:translateX(14px)}
  .row:hover .row-kind{color:var(--ink)}
}

.index-foot{margin-top:clamp(1.8rem,4vw,2.8rem);font-size:1rem}
.index-foot a{box-shadow:inset 0 -1px 0 var(--ink);padding-bottom:2px}
.index-foot a:hover{box-shadow:inset 0 -1px 0 var(--accent)}

/* Immagine che segue il cursore */
.peek{
  position:fixed;top:0;left:0;z-index:40;
  width:min(38vw,540px);aspect-ratio:4/3;
  pointer-events:none;opacity:0;transition:opacity .28s ease;
  overflow:hidden;background:var(--paper);
}
.peek img{width:100%;height:100%;object-fit:cover}
.peek.on{opacity:1}

/* Servizi ------------------------------------------------------------------ */

.service{
  display:grid;grid-template-columns:minmax(0,26%) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem);
  padding-block:clamp(1.6rem,3.4vw,2.4rem);
  border-top:1px solid var(--rule);
}
.service:last-of-type{border-bottom:1px solid var(--rule)}
.service h3{
  font-family:var(--serif);font-style:italic;font-weight:var(--serif-weight);
  font-size:clamp(1.25rem,2.4vw,1.7rem);margin:0;line-height:1.2;
}
.service p{margin:0;color:var(--grey);max-width:52ch}

/* Settori ------------------------------------------------------------------ */

/* Una riga sola, mai a capo. Il corpo e' in vw e non in rem: cosi' l'intera
   riga si rimpicciolisce insieme alla finestra e continua a starci dentro a
   qualunque larghezza, invece di spezzarsi a una soglia precisa. */
.sectors{
  margin:0;
  max-width:none;
  display:flex;
  flex-wrap:nowrap;
  gap:0 .7em;
  font-family:var(--sans);
  font-weight:400;
  font-size:1.7vw;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--grey);
  white-space:nowrap;
}
.sectors a{
  white-space:nowrap;
  transition:color .18s ease;
}
.sectors a:hover{color:var(--ink)}

/* Clienti ------------------------------------------------------------------ *//* Clienti ------------------------------------------------------------------ */

.clients{
  display:flex;flex-wrap:wrap;gap:.35em clamp(1.2rem,3vw,2.6rem);
  font-family:var(--serif);font-weight:var(--serif-weight);
  font-size:clamp(1.1rem,2.2vw,1.6rem);
  line-height:1.5;max-width:52ch;
  list-style:none;margin:0;padding:0;
}

/* Studio ------------------------------------------------------------------- */

.studio{display:grid;grid-template-columns:minmax(0,26%) minmax(0,1fr);gap:clamp(1rem,4vw,3rem)}
.studio p{margin:0 0 1.4rem;max-width:var(--measure)}
.studio p:last-child{margin-bottom:0}
.studio .aside{color:var(--grey);font-size:.95rem;line-height:1.8}

/* ==========================================================================
   5. Scheda progetto
   ========================================================================== */

.crumbs{font-size:.9rem;color:var(--grey);padding-top:clamp(2rem,6vw,4.5rem);margin:0}
.crumbs a:hover{color:var(--accent)}

/* Testata della scheda: titolo a sinistra, immagine del progetto a destra,
   nelle stesse proporzioni dell'apertura in home. Il titolo resta il
   protagonista e l'immagine anticipa il lavoro senza rubargli la scena. */
.project-top.has-hero{
  display:grid;
  grid-template-columns:60% 30%;
  column-gap:10%;
  align-items:end;
}

.project-hero{margin:0}
.project-hero img{
  width:100%;
  height:auto;
  /* Nessun ritaglio: un'etichetta verticale deve restare intera. Se e' piu'
     alta di cosi', si rimpicciolisce e si appoggia al margine sinistro
     della sua colonna. */
  max-height:70vh;
  object-fit:contain;
  object-position:left bottom;
}

.entry-title{
  font-family:var(--serif);
  font-weight:var(--serif-weight);
  font-size:clamp(2.4rem,7vw,6rem);
  line-height:1;
  letter-spacing:-.015em;
  margin:.5em 0 0;
  max-width:16ch;
}

.facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.5rem);
  margin:clamp(3rem,8vw,6rem) 0 0;
  padding-top:1.4rem;border-top:1px solid var(--rule);
  font-size:.95rem;
}
.facts dt{color:var(--grey);margin-bottom:.35rem}
.facts dd{margin:0}
.facts a:hover{color:var(--accent)}

.lead{
  margin:clamp(3rem,7vw,5.5rem) 0 0;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.4;
  font-weight:var(--text-weight);
  max-width:48ch;
}

/* Contenuto Gutenberg ------------------------------------------------------ */

/* --------------------------------------------------------------------------
   Il testo lungo.

   Impostato come un catalogo: corpo piccolo e sottile, interlinea stretta,
   titoli di poco piu' grandi del testo. La gerarchia non la fa la dimensione
   dei caratteri, la fa lo spazio bianco sopra i titoli — per questo i margini
   superiori sono larghi e quelli inferiori stretti: ogni titolo resta
   attaccato al proprio paragrafo e staccato da quello precedente.
   -------------------------------------------------------------------------- */

.entry-content{
  padding-top:clamp(3rem,8vw,6rem);
  font-size:var(--text-size);
  line-height:var(--text-leading);
  font-weight:var(--text-weight);
}

.entry-content > *{
  max-width:var(--measure);
  margin-inline:0;
  margin-block:0 1.1rem;
}
.entry-content > .alignwide{max-width:min(1400px,100%)}
.entry-content > .alignfull{max-width:none;margin-inline:calc(var(--gutter) * -1)}

.entry-content h2{
  font-family:var(--serif);font-style:italic;font-weight:var(--serif-weight);
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.22;letter-spacing:0;
  margin-block:clamp(3.5rem,8vw,5.5rem) .9rem;
}
.entry-content h3{
  font-family:var(--serif);font-weight:var(--serif-weight);
  font-size:clamp(1.1rem,1.7vw,1.3rem);
  line-height:1.3;
  margin-block:clamp(2.4rem,5vw,3.6rem) .7rem;
}
.entry-content h4{
  font-family:var(--sans);
  font-size:1rem;font-weight:500;
  margin-block:2rem .5rem;
}

.entry-content p{margin-block:0 1.1rem}

/* Con il corpo a peso 300 il neretto pieno stacca troppo: 500 basta. */
.entry-content strong,
.entry-content b{font-weight:500}

/* Il corsivo di Archivo a peso 300 e' delicato: va bene cosi', ma i blocchi
   interamente in corsivo si leggono meglio con un filo di peso in piu'. */
.entry-content em em,
.entry-content p > em:only-child{font-weight:400}
.entry-content a{box-shadow:inset 0 -1px 0 var(--rule)}
.entry-content a:hover{box-shadow:inset 0 -1px 0 var(--accent)}

/* Un collegamento che avvolge un'immagine non prende la sottolineatura: il
   filetto uscirebbe sotto la foto e al passaggio del mouse diventerebbe
   rosso, come se fosse un testo da leggere. */
.entry-content figure a,
.entry-content .wp-block-image a,
.entry-content .wp-block-gallery a,
.entry-content .penna-strip a{box-shadow:none}

/* Stesso caso, quando l'immagine non e' dentro una figure. In regola a se'
   perche' i browser che non conoscono :has() scarterebbero l'intero elenco. */
.entry-content a:has(img){box-shadow:none}

.entry-content ul,.entry-content ol{margin-block:0 1.6rem;padding-left:1.2rem}
.entry-content li{margin-bottom:.4rem}

.entry-content figure,
.entry-content .wp-block-image,
.entry-content .wp-block-gallery,
.entry-content .wp-block-embed,
.entry-content .wp-block-video{
  max-width:min(1400px,100%);
  margin-block:clamp(2.5rem,6vw,4.5rem);
}
.entry-content figcaption{
  margin-top:.85rem;font-size:.88rem;color:var(--grey);text-align:left;
}

/* --------------------------------------------------------------------------
   Media a tutta larghezza per impostazione predefinita.

   Vale per i blocchi di primo livello del contenuto: escono dal margine
   laterale e arrivano al bordo dello schermo senza dover impostare
   l'allineamento su ogni singola immagine.

   Un blocco annidato dentro un Gruppo o delle Colonne non può uscire dal
   proprio contenitore: in quel caso serve impostargli a mano
   "Larghezza piena" dalla barra del blocco.
   -------------------------------------------------------------------------- */

.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-video,
.entry-content > .wp-block-audio,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-media-text,
.entry-content > .penna-strip{
  max-width:none;
  width:auto;
  margin-inline:calc(var(--gutter) * -1);
}

.entry-content > figure > img,
.entry-content > .wp-block-image img,
.entry-content > .wp-block-video video,
.entry-content > .wp-block-embed iframe,
.entry-content > .wp-block-embed video{
  width:100%;
}

/* --------------------------------------------------------------------------
   Altezza dei media.

   Regola: l'immagine occupa piu' spazio che puo' senza mai uscire dallo
   schermo e senza mai essere tagliata. Vale in tutte e due le direzioni.

     - orizzontale: riempie la larghezza, alta quanto le sue proporzioni
       richiedono, fino al limite --media-h;
     - verticale: alta una schermata, e la larghezza scende di conseguenza;
       l'immagine resta centrata, con il bianco della pagina ai due lati.

   Il ritaglio non e' il comportamento predefinito perche' su un'etichetta
   verticale distrugge il soggetto: un file 402x1024 dentro un riquadro largo
   quanto lo schermo verrebbe ingrandito cinque volte e poi tagliato, e di
   quel che avete disegnato resterebbe una fascia sfocata.

   L'unita' svh e' l'altezza dello schermo con la barra del browser visibile:
   su telefono evita che l'immagine cambi altezza mentre si scorre.

   Per cambiare comportamento su un singolo blocco si scrive una di queste
   classi nel campo "Classi CSS aggiuntive" della barra laterale, sotto
   Avanzate:

     h-schermo     riempie tutta la schermata, ritagliando sopra e sotto.
                   Da usare solo su immagini orizzontali e senza soggetti
                   vicini ai bordi.
     h-banda       fascia bassa e larga, ritagliata
     h-intera      nessun limite di altezza: l'immagine per intero
     h-contenuta   il comportamento predefinito, se serve riaffermarlo

   Sui ritagli si sceglie cosa salvare aggiungendo, separata da uno spazio,
   fuoco-alto oppure fuoco-basso.

   Per alzare o abbassare l'altezza su tutto il sito basta cambiare
   --media-h qui sotto.
   -------------------------------------------------------------------------- */

:root{
  --media-h:100vh;
}

@supports (height:100svh){
  :root{ --media-h:100svh; }
}

.entry-content > figure > img,
.entry-content > .wp-block-image img,
.entry-content > .wp-block-video video{
  height:auto;
  max-height:var(--media-h);
  object-fit:contain;
  /* Le verticali restano a filo del margine sinistro, come il testo:
     il bianco che avanza sta tutto a destra e diventa parte della pagina. */
  object-position:left center;
}

/* Il blocco Copertina e' un contenitore, non un'immagine. */
.entry-content > .wp-block-cover{
  max-height:var(--media-h);
}

/* Scelte esplicite per singolo blocco. */

.entry-content .h-contenuta img,
.entry-content .h-contenuta video,
.entry-content img.h-contenuta,
.entry-content video.h-contenuta{
  height:auto;
  max-height:var(--media-h);
  object-fit:contain;
}

.entry-content .h-schermo img,
.entry-content .h-schermo video,
.entry-content img.h-schermo,
.entry-content video.h-schermo{
  height:var(--media-h);
  max-height:var(--media-h);
  object-fit:cover;
}

.entry-content .h-banda img,
.entry-content .h-banda video,
.entry-content img.h-banda,
.entry-content video.h-banda{
  height:min(58vh,520px);
  max-height:min(58vh,520px);
  object-fit:cover;
}

.entry-content .h-intera img,
.entry-content .h-intera video,
.entry-content img.h-intera,
.entry-content video.h-intera{
  height:auto;
  max-height:none;
  object-fit:initial;
}

.entry-content .fuoco-alto img,
.entry-content .fuoco-alto video{object-position:center top}

.entry-content .fuoco-basso img,
.entry-content .fuoco-basso video{object-position:center bottom}

/* Rete di sicurezza: nessun media puo' superare la larghezza dello schermo,
   a qualunque livello di annidamento e con qualunque classe. */
.entry-content img,
.entry-content video,
.entry-content iframe{
  max-width:100%;
}

/* --------------------------------------------------------------------------
   Il testo non tocca mai il bordo.

   Solo i media escono dal margine. Paragrafi, titoli, elenchi e citazioni
   restano incolonnati a sinistra, anche quando il blocco che li contiene e'
   a larghezza piena o e' stato salvato centrato in passato.
   -------------------------------------------------------------------------- */

.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content li,
.entry-content dl,
.entry-content blockquote,
.entry-content figcaption,
.entry-content .wp-block-quote,
.entry-content .wp-block-pullquote,
.entry-content .has-text-align-center,
.entry-content .has-text-align-right{
  text-align:left;
}

/* Contenitori a larghezza piena: si restituisce il margine al testo interno. */
.entry-content > .alignfull:not(figure):not(.wp-block-image):not(.wp-block-video):not(.wp-block-gallery):not(.wp-block-embed):not(.wp-block-audio),
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-columns.alignfull{
  padding-inline:var(--gutter);
}

/* Dentro quei contenitori il testo mantiene la sua misura di lettura. */
.entry-content > .alignfull > p,
.entry-content > .alignfull > h2,
.entry-content > .alignfull > h3,
.entry-content > .alignfull > ul,
.entry-content > .alignfull > ol,
.entry-content > .wp-block-group.alignfull > p,
.entry-content > .wp-block-group.alignfull > h2,
.entry-content > .wp-block-group.alignfull > h3,
.entry-content > .wp-block-cover p{
  max-width:var(--measure);
  margin-inline:0;
}

/* Le didascalie restano incolonnate con il testo. */
.entry-content > figure > figcaption,
.entry-content > .wp-block-image > figcaption,
.entry-content > .wp-block-video > figcaption,
.entry-content > .wp-block-gallery > figcaption,
.entry-content > .wp-block-embed figcaption{
  padding-inline:var(--gutter);
}

/* "Larghezza estesa" resta la via di mezzo: contenuta a 1400px. */
.entry-content > .alignwide,
.entry-content > figure.alignwide,
.entry-content > .wp-block-image.alignwide{
  max-width:min(1400px,100%);
  margin-inline:0;
}
.entry-content > .alignwide img,
.entry-content > figure.alignwide img{width:auto}

.entry-content blockquote{
  border:0;margin-block:clamp(3rem,7vw,5rem);padding:0;
  max-width:22ch;
}
.entry-content blockquote p{
  font-family:var(--serif);font-weight:var(--serif-weight);
  font-size:clamp(1.8rem,4.6vw,3.4rem);
  line-height:1.05;letter-spacing:-.015em;
}
.entry-content blockquote cite{
  display:block;font-family:var(--sans);font-style:normal;
  font-size:.92rem;color:var(--grey);margin-top:1.2rem;
}

.entry-content hr{
  border:0;border-top:1px solid var(--rule);
  margin-block:clamp(3rem,7vw,5rem);max-width:none;
}

/* Provino per marchi su fondo neutro */
.penna-specimen{
  background:var(--tint);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;padding:clamp(1.5rem,6vw,4rem);
}
.penna-specimen img{max-height:100%;width:auto;object-fit:contain}

/* Striscia orizzontale ------------------------------------------------------

   Le tavole scorrono di lato invece di impilarsi. La prima parte dal margine
   sinistro come il testo; le altre escono a destra, e quel taglio e' il
   segnale che ce ne sono altre.
   -------------------------------------------------------------------------- */

.entry-content .penna-strip{
  display:flex;
  gap:clamp(.8rem,2vw,1.6rem);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-inline:var(--gutter);
  padding-bottom:1.2rem;
  margin-block:clamp(2.5rem,6vw,4.5rem);
  scrollbar-width:thin;
  cursor:grab;
}
.entry-content .penna-strip.is-dragging{cursor:grabbing;scroll-snap-type:none}


.entry-content .penna-strip > figure,
.entry-content .penna-strip > img{
  margin:0;
  flex:0 0 auto;
  scroll-snap-align:start;
  max-width:none;
}

/* Altezza uniforme, larghezza secondo le proporzioni: e' quello che rende
   leggibile una fila di tavole verticali. */
.entry-content .penna-strip img{
  height:clamp(300px,52vh,560px);
  width:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
}

/* Il trascinamento non deve selezionare le immagini. */
.entry-content .penna-strip a{pointer-events:auto}
.entry-content .penna-strip.is-dragging a{pointer-events:none}

/* --------------------------------------------------------------------------
   Fotografie e fondo pagina.

   Il fondo del sito non e' bianco puro ma #fcfcfb. Una foto jpg con lo
   sfondo bianco ritagliata su quel fondo si vede: resta un rettangolo piu'
   chiaro attorno al soggetto.

   Con mix-blend-mode:multiply il bianco della foto si moltiplica per il
   fondo e prende la stessa tinta, quindi il bordo sparisce. I pixel scuri
   restano come sono: moltiplicare per un valore quasi 1 non li cambia.

   Da sapere: la regola toglie il bianco puro anche dove serviva. Se una
   foto ha un soggetto chiaro che deve staccare dal fondo, o e' la schermata
   di un'interfaccia bianca, si scrive no-moltiplica nel campo "Classi CSS
   aggiuntive" del blocco.
   -------------------------------------------------------------------------- */

.entry-content img,
.entry-content video,
.project-hero img,
.row-thumb,
.rel-row img{
  mix-blend-mode:multiply;
}

.no-moltiplica img,
.no-moltiplica video,
img.no-moltiplica,
video.no-moltiplica,
.penna-specimen img{
  mix-blend-mode:normal;
}

/* Video: niente moltiplica. Non sono ritagli su bianco e la lightbox ha
   il fondo nero, dove moltiplicare cancellerebbe l'immagine. */
.reel-bg,
.reel-modal video{mix-blend-mode:normal}

/* ==========================================================================
   6. Archivio progetti
   ========================================================================== */

.filters{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  margin-bottom:clamp(2.5rem,6vw,4rem);
  font-size:.95rem;
  list-style:none;padding:0;
}
.filters a{color:var(--grey);transition:color .18s ease}
.filters a:hover{color:var(--ink)}
.filters .is-current a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--accent);padding-bottom:2px}

.pagination{
  display:flex;gap:1.2rem;flex-wrap:wrap;
  padding-top:clamp(2.5rem,6vw,4rem);font-size:.95rem;
}
.pagination .page-numbers{color:var(--grey)}
.pagination .page-numbers:hover{color:var(--ink)}
.pagination .current{color:var(--ink)}

/* ==========================================================================
   7. Correlati, paginazione articolo
   ========================================================================== */

.related{border-top:1px solid var(--rule)}
.rel-row{
  display:grid;grid-template-columns:120px minmax(0,1fr) 22%;
  align-items:center;gap:clamp(1rem,3vw,2rem);
  padding-block:clamp(1rem,2.2vw,1.5rem);
  border-bottom:1px solid var(--rule);
}
.rel-row img{aspect-ratio:4/3;object-fit:cover;width:100%}
.rel-name{
  font-family:var(--serif);font-weight:var(--serif-weight);font-size:clamp(1.3rem,2.8vw,2rem);
  line-height:1.1;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.rel-kind{color:var(--grey);font-size:.9rem;text-align:right}
@media (hover:hover) and (pointer:fine){
  .rel-row:hover .rel-name{transform:translateX(12px)}
}

.pager{
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-block:clamp(3rem,7vw,5rem);
}
.pager span{display:block;font-size:.9rem;color:var(--grey);margin-bottom:.4rem}
.pager a{font-family:var(--serif);font-weight:var(--serif-weight);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.1}
.pager a:hover{box-shadow:inset 0 -1px 0 var(--accent)}
.pager .next{text-align:right;margin-left:auto}

/* ==========================================================================
   8. Blog
   ========================================================================== */

.post-list{border-top:1px solid var(--rule)}
.post-item{
  display:grid;grid-template-columns:minmax(0,1fr) 22%;
  gap:1.5rem;align-items:baseline;
  padding-block:clamp(1.4rem,3vw,2.2rem);
  border-bottom:1px solid var(--rule);
}
.post-item h2{
  font-family:var(--serif);font-weight:var(--serif-weight);
  font-size:clamp(1.4rem,3vw,2.2rem);
  line-height:1.12;margin:0 0 .6rem;
}
.post-item p{margin:0;color:var(--grey);max-width:56ch;font-size:1rem}
.post-item time{color:var(--grey);font-size:.9rem;text-align:right}

.post-header .entry-title{max-width:22ch;font-size:clamp(2rem,5.2vw,4.2rem)}
.post-meta{margin-top:1.6rem;font-size:.92rem;color:var(--grey)}

/* ==========================================================================
   9. Chiamata all'azione e piede
   ========================================================================== */

.cta{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:start;
}
.cta h2{
  font-family:var(--serif);font-style:italic;font-weight:var(--serif-weight);
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  margin:0;max-width:16ch;line-height:1.2;
}
.cta p{margin:0 0 1.6rem;max-width:36ch;color:var(--grey)}

.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:1.05rem 1.9rem;font-size:1rem;font-weight:500;
  transition:background .18s ease;border:0;cursor:pointer;font-family:inherit;
}

/* Stesso colore dei collegamenti, al passaggio, al fuoco da tastiera e
   durante il clic. Senza lo stato :active il pulsante restava nero proprio
   nell'istante in cui viene premuto. */
.btn:hover,
.btn:focus-visible,
.btn:active{background:var(--accent);color:var(--paper)}

.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.contact-mail{
  font-family:var(--serif);font-weight:var(--serif-weight);
  font-size:clamp(1.7rem,4.6vw,3.4rem);
  line-height:1.1;letter-spacing:-.01em;display:inline-block;
}
.contact-mail:hover{box-shadow:inset 0 -1px 0 var(--accent)}
.contact-lines{margin-top:clamp(1.6rem,3vw,2.4rem);color:var(--grey);line-height:1.9;font-size:1rem}
.contact-lines a:hover{color:var(--ink)}

.foot{
  border-top:1px solid var(--rule);
  padding-block:clamp(1.6rem,3vw,2.4rem);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.88rem;color:var(--grey);
}
.foot a:hover{color:var(--accent)}
.foot ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* ==========================================================================
   10. Mobile
   ========================================================================== */

@media (max-width:860px){
  .nav-toggle{display:block;order:2}

  /* Il menù copre lo schermo. Parte da sotto la testata, cosi' il logo e il
     tasto restano visibili e si sa sempre dove si e' e come si chiude. */
  .nav{
    position:fixed;inset:0;z-index:40;
    background:var(--paper);
    padding-top:var(--header-h);
    overflow-y:auto;
    opacity:0;visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
  }
  .nav.is-open{opacity:1;visibility:visible}

  .nav ul{
    flex-direction:column;gap:0;
    padding:0 var(--gutter) 3rem;
  }
  .nav li{border-bottom:1px solid var(--rule)}
  .nav li:first-child{border-top:1px solid var(--rule)}

  .nav a{
    display:block;
    padding-block:1.4rem;
    font-family:var(--serif);font-weight:var(--serif-weight);
    font-size:clamp(1.5rem,6vw,2.1rem);
    line-height:1.15;
    color:var(--ink);
  }
  .nav a:hover,
  .nav .current-menu-item > a{color:var(--accent)}

  /* Con il menù aperto la pagina sotto non deve scorrere. */
  body.nav-open{overflow:hidden}
}

@media (max-width:760px){
  body{font-size:16px}

  /* Selettore a due classi: serve a superare .index-thumbs .row, che
     altrimenti tiene anche qui la terza colonna del settore — nascosto su
     mobile ma con lo spazio ancora riservato. */
  .index .row,
  .row{
    grid-template-columns:38% minmax(0,1fr);
    align-items:center;
    gap:clamp(.9rem,3vw,1.3rem);
    padding-block:clamp(1rem,3vw,1.4rem);
  }
  .row-thumb{display:block;aspect-ratio:4/3;object-fit:cover;width:100%}
  .row-name{font-size:clamp(1.15rem,4.6vw,1.5rem);line-height:1.12}
  .row-kind{display:none}

  .project-top.has-hero{grid-template-columns:1fr;gap:2rem}
  .project-hero img{max-height:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
  .service,.studio,.cta,.contact{grid-template-columns:1fr;gap:.6rem}
  .cta,.contact{gap:2.5rem}
  .rel-row{grid-template-columns:88px minmax(0,1fr)}
  .rel-kind{display:none}
  .post-item{grid-template-columns:1fr;gap:.5rem}
  .post-item time{text-align:left}
  .peek{display:none}
  .penna-strip img{height:62vw;min-height:260px}
  .hero.has-reel .hero-top{grid-template-columns:1fr;gap:2.5rem}
  .reel{max-width:none;margin-left:0}
  .sectors{flex-wrap:wrap;font-size:1.05rem;gap:.35em 1.2em;white-space:normal}
  .entry-content > .alignfull{margin-inline:calc(var(--gutter) * -1)}
  /* Su schermo stretto il margine negativo basta e avanza: niente da aggiungere. */
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .row:hover .row-name,.rel-row:hover .rel-name{transform:none}
}

/* ==========================================================================
   11. Stampa
   ========================================================================== */

@media print{
  .masthead,.nav,.peek,.cta,.pager,.related,.filters{display:none}
  body{font-size:11pt}
  .entry-content > *{max-width:none}
}