/* =========================================================================
   PIETRA E PROGETTO — design system « cava e materioteca », prefix pp-
   Vocabulary: la cava e la cantieristica della pietra, in italiano come
   firma: bancata (banco di cava = larghezza utile), insegna (segno
   d'officina), officine (nav), cava (copertina in modo d'affiche), velo
   (coprifoto FISSO), strato (banco numerato = sezione), targa (targhetta),
   apparecchio (apparecchiatura di pietra = mosaico asimmetrico), blocco
   (masso estratto = carta), sciatura (taglio di sega = cornice immagine),
   cartiglio (cartellino della carta), materioteca/campione (flusso datato),
   attacco (testa del saggio), paramento (faccia a vista = immagine di
   testa), colonna (lettura), scheda (scheda tecnica scura), nota (ricordo),
   verifica (check-list), tavola (tabella), dopo (a leggere dopo), giunto
   (separatore SVG), marchio (ornamenti SVG), plinto (piede).
   Palette: bianco carrara + grigio piombo + verde serpentino + inchiostro.
   Nessun blu, nessun font remoto, nessun dispositivo a gradiente. Dark
   mode automatico.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COLORI · la cava e l'officina --------------------------------- */
  --carrara:       #f4f2ec;  /* bianco carrara: carta di tutte le pagine   */
  --vena:          #e9e5da;  /* riserve, sezioni alternate                 */
  --marmo-vivo:    #faf8f2;  /* riserva chiara: note, righe pari           */
  --inchiostro:    #26282b;  /* inchiostro del testo                       */
  --piombo:        #2f3237;  /* grigio piombo: insegna, plinto, schede     */
  --piombo-fondo:  #23262a;  /* fondo piu profondo                         */
  --inchiostro-dolce: #63666c; /* didascalie, meta, sottotitoli            */
  --serpentino:    #3e6b5a;  /* verde serpentino: link, forte, filetti     */
  --serpentino-scuro: #2c4f42; /* pressione / hover                        */
  --serpentino-chiaro: #87b8a0; /* serpentino su fondi scuri               */
  --filetto:       #d8d3c6;  /* hairline sulla carta                       */
  --filetto-notte: #3b3f45;  /* hairline sulla notte                       */

  /* Dark mode: la cava dopo il tramonto, la lucerna dell'officina. */
  --notte-carta:   #1b1d20;
  --notte-vena:    #24272b;
  --notte-testo:   #e6e4de;
  --notte-dolce:   #a9acb2;

  /* ---- 2. TIPO · stack composti, nulla va a cercarsi fuori -------------- */
  --fonte-titolo: "Iowan Old Style", "Iowan Old Style Roman", Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", Georgia, serif;
  --fonte-testo: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --fonte-tecnica: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --titolo-peso: 700;
  --titolo-interlettera: 0.004em;
  --caps-interlettera: 0.22em;   /* targhe, edizione, riferimenti */

  --corpo-taille: clamp(1.03rem, 0.98rem + 0.24vw, 1.15rem);
  --corpo-interlinea: 1.68;
  --scala-h1: clamp(2.25rem, 1.15rem + 3.9vw, 4.4rem);
  --scala-h2: clamp(1.52rem, 1.1rem + 1.55vw, 2.35rem);
  --scala-h3: clamp(1.14rem, 1.02rem + 0.58vw, 1.46rem);
  --scala-h4: 1.05rem;

  /* ---- 3. RITMO --------------------------------------------------------- */
  --misura:        62ch;       /* colonna di lettura                         */
  --misura-larga:  1340px;
  --margine-pagina: clamp(1.1rem, 4vw, 4rem);
  --canale:        clamp(0.9rem, 2.2vw, 2rem);
  --respiro:       clamp(2.4rem, 5.5vw, 5.2rem);
  --scalino:       clamp(1.2rem, 3vw, 3.2rem);

  /* ---- 4. PARTICOLARI --------------------------------------------------- */
  --spigolo:     2px;
  --filetto-fino: 1px solid var(--filetto);
  --velocita:    150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --carrara:      var(--notte-carta);
    --vena:         var(--notte-vena);
    --marmo-vivo:   #2b2f34;
    --inchiostro:   var(--notte-testo);
    --inchiostro-dolce: var(--notte-dolce);
    --serpentino:   var(--serpentino-chiaro);
    --serpentino-scuro: #a9d3bd;
    --filetto:      #3b3f45;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carrara);
  color: var(--inchiostro);
  font-family: var(--fonte-testo);
  font-size: var(--corpo-taille);
  line-height: var(--corpo-interlinea);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.pp-marchio { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titolo);
  font-weight: var(--titolo-peso);
  letter-spacing: var(--titolo-interlettera);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--scala-h1); }
h2 { font-size: var(--scala-h2); }
h3 { font-size: var(--scala-h3); }
h4 { font-size: var(--scala-h4); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--serpentino);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--velocita);
}
a:hover { color: var(--serpentino-scuro); }
:focus-visible {
  outline: 2px solid var(--serpentino);
  outline-offset: 3px;
  border-radius: 1px;
}
hr { border: 0; border-top: var(--filetto-fino); margin: var(--respiro) 0; }

::selection { background: var(--serpentino); color: var(--marmo-vivo); }
@media (prefers-color-scheme: dark) {
  ::selection { background: var(--serpentino-chiaro); color: #1b1d20; }
}

/* Numeri di tabelle, prezzi e date in cifre tabulari. */
.pp-tavola, .pp-scheda, .pp-nota, .pp-verifica, .pp-giorno, .pp-riferimenti,
.pp-strato__numero, .pp-cava__edizione, .pp-blocco__indicazione {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

/* Skip link. Non si tocca mai. */
.pp-salta {
  position: absolute; left: -9999px; top: 0;
  background: var(--piombo); color: var(--marmo-vivo);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.pp-salta:focus { left: 0.6rem; top: 0.6rem; }

/* La bancata: larghezza utile di ogni zona di contenuto. */
.pp-bancata {
  width: 100%;
  max-width: var(--misura-larga);
  margin-inline: auto;
  padding-inline: var(--margine-pagina);
}
.pp-cantiere { display: block; }

/* --- Insegna (il segno sopra il portale dell'officina) ------------------- */
.pp-insegna {
  background: var(--piombo);
  color: var(--marmo-vivo);
  border-bottom: 1px solid var(--filetto-notte);
  box-shadow: inset 0 -4px 0 var(--serpentino);
  padding-block: clamp(0.72rem, 1.6vw, 1.15rem);
}
.pp-insegna__fila {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.pp-insegna__nome {
  font-family: var(--fonte-titolo);
  font-size: clamp(1.32rem, 1.1rem + 0.98vw, 1.95rem);
  font-weight: var(--titolo-peso);
  color: var(--marmo-vivo);
  text-decoration: none;
  letter-spacing: 0.014em;
}
.pp-insegna__nome:hover { color: #fff; }
.pp-insegna__nome span {
  display: block;
  font-family: var(--fonte-tecnica);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino-chiaro);
  margin-top: 0.34rem;
}
.pp-officine ul {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  list-style: none; margin: 0; padding: 0;
}
.pp-officine a {
  color: var(--notte-dolce);
  text-decoration: none;
  font-family: var(--fonte-tecnica);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding-block: 0.25rem;
  transition: color var(--velocita);
}
.pp-officine a:hover { color: var(--serpentino-chiaro); }

/* --- Filo (breadcrumb; e anche il fil della pietra) ---------------------- */
.pp-filo { padding-block: clamp(0.85rem, 1.8vw, 1.3rem); }
.pp-filo ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--fonte-tecnica);
  font-size: 0.8rem;
  color: var(--inchiostro-dolce);
}
.pp-filo li + li::before {
  content: "›";
  margin-right: 0.55rem;
  color: var(--serpentino);
}
.pp-filo a { color: var(--inchiostro-dolce); }
.pp-filo a:hover { color: var(--serpentino); }
.pp-filo [aria-current="page"] { color: var(--inchiostro); font-weight: 600; }

/* =========================================================================
   HOME · LA CAVA (affiche: tipografia prima, foto dietro, banda corta
   perché la griglia degli strati cominci sotto i 700 px di altezza)
   ========================================================================= */

.pp-cava { position: relative; isolation: isolate; }
.pp-cava__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Il velo e un colore FISSO per dottrina, mai un var(). */
.pp-cava__velo {
  position: absolute; inset: 0;
  background: rgba(35, 38, 42, 0.82);
  z-index: -1;
}
@media (prefers-color-scheme: dark) {
  .pp-cava__velo { background: rgba(15, 16, 18, 0.87); }
}
.pp-cava__testo {
  padding-block: clamp(2.9rem, 6.5vw, 5rem) clamp(2.2rem, 5vw, 3.8rem);
  max-width: 66rem;
  color: var(--notte-testo);
}
.pp-cava__kicker {
  display: flex; align-items: center;
  gap: 0.8rem;
  font-family: var(--fonte-tecnica);
  font-size: 0.74rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino-chiaro);
  margin: 0 0 1rem;
}
.pp-cava__kicker::after {
  content: "";
  flex: 1;
  max-width: 9rem;
  border-top: 1px solid currentColor;
  opacity: 0.7;
}
.pp-cava__testo h1 {
  color: #fff;
  max-width: 21ch;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.pp-cava__testo > p:not([class]) {
  font-size: clamp(1.02rem, 0.95rem + 0.38vw, 1.22rem);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--notte-testo);
  margin: 1.05rem 0 0;
}
/* Doppio filetto + riga d'edizione, la firma dell'affiche di cava. */
.pp-cava__edizione {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 1.1rem;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 3px double rgba(230, 228, 222, 0.5);
  font-family: var(--fonte-tecnica);
  font-size: 0.75rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino-chiaro);
}
.pp-cava__edizione .pp-marchio { color: var(--serpentino-chiaro); }
.pp-cava__edizione em {
  font-style: normal;
  color: var(--notte-testo);
  letter-spacing: 0.08em;
}

/* =========================================================================
   STRATI (sezioni), numerati 01-05
   ========================================================================= */

.pp-strato { padding-block: clamp(1.9rem, 4.4vw, 3.6rem); }
.pp-strato--incavo { background: var(--vena); }
.pp-strato__testa {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: var(--filetto-fino);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.pp-strato__numero {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  color: var(--serpentino);
  margin-right: 0.7rem;
}
.pp-strato__titolo { font-size: var(--scala-h2); }
.pp-strato__nota {
  margin: 0;
  color: var(--inchiostro-dolce);
  font-size: 0.92rem;
  max-width: 42ch;
}

/* Il giunto: ornamento SVG tra le grandi sezioni. */
.pp-giunto {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.4rem, 1.2vw, 1rem);
  color: var(--serpentino);
  opacity: 0.75;
}

/* La targa: surtitolo in maiuscoletto verde. */
.pp-targa {
  font-family: var(--fonte-tecnica);
  font-size: 0.72rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   L'APPARECCHIO · mosaico asimmetrico di blocchi
   ========================================================================= */

.pp-apparecchio {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--canale);
  list-style: none; margin: 0; padding: 0;
}
.pp-blocco { margin: 0; }
.pp-blocco--pieno   { grid-column: span 6; }
.pp-blocco--grande  { grid-column: span 4; }
.pp-blocco--mezzo   { grid-column: span 3; }
.pp-blocco--piccolo { grid-column: span 2; }
.pp-blocco--scalino  { transform: translateY(var(--scalino)); }
.pp-blocco--scalino2 { transform: translateY(calc(var(--scalino) * 0.5)); }
.pp-apparecchio--denso { padding-bottom: var(--scalino); }

.pp-blocco__sciatura {
  position: relative;
  overflow: hidden;
  border-radius: var(--spigolo);
  border: var(--filetto-fino);
  background: var(--vena);
}
.pp-blocco__sciatura::after {   /* l'ombra sale sul passaggio; il link resta sul titolo */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35, 38, 42, 0) 58%, rgba(35, 38, 42, 0.26));
  opacity: 0;
  transition: opacity var(--velocita);
}
.pp-blocco:hover .pp-blocco__sciatura::after,
.pp-blocco:focus-within .pp-blocco__sciatura::after { opacity: 1; }
.pp-blocco__sciatura--pano      { aspect-ratio: 21 / 9; }
.pp-blocco__sciatura--paesaggio { aspect-ratio: 4 / 3; }
.pp-blocco__sciatura--quadrato  { aspect-ratio: 1 / 1; }
.pp-blocco__sciatura--ritratto  { aspect-ratio: 3 / 4; }
.pp-blocco__vista {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.pp-blocco:hover .pp-blocco__vista { transform: scale(1.02); }

.pp-blocco__cartiglio { padding-top: 0.7rem; }
.pp-blocco__titolo { margin: 0 0 0.3rem; }
.pp-blocco__link {
  color: var(--inchiostro);
  text-decoration: none;
  background-image: linear-gradient(var(--serpentino), var(--serpentino));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--velocita), color var(--velocita);
}
.pp-blocco__link:hover { color: var(--serpentino-scuro); background-size: 100% 2px; }
.pp-blocco__nota {
  margin: 0;
  color: var(--inchiostro-dolce);
  font-size: 0.92rem;
  line-height: 1.5;
}
.pp-blocco__indicazione {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--fonte-tecnica);
  font-size: 0.7rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino);
  border: 1px solid currentColor;
  border-radius: var(--spigolo);
  padding: 0.14rem 0.5rem;
}

/* =========================================================================
   LA MATERIOTECA · il flusso datato della home
   ========================================================================= */

.pp-materioteca {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--canale) * 1.5);
}
.pp-campione {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.05rem;
  padding-block: 1.1rem;
  border-bottom: var(--filetto-fino);
  margin: 0;
}
.pp-materioteca .pp-campione:nth-last-child(-n+2) { border-bottom: 0; }
.pp-campione__vista {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--spigolo);
  border: var(--filetto-fino);
}
.pp-giorno {
  margin: 0 0 0.3rem;
  font-family: var(--fonte-tecnica);
  font-size: 0.72rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino);
}
.pp-campione h3 { margin: 0 0 0.3rem; }
.pp-campione h3 a { color: var(--inchiostro); text-decoration: none; }
.pp-campione h3 a:hover { color: var(--serpentino); text-decoration: underline; }
.pp-campione p:not([class]) { margin: 0; color: var(--inchiostro-dolce); font-size: 0.93rem; }

/* =========================================================================
   SAGGI · attacco, paramento, colonna
   ========================================================================= */

.pp-attacco {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2.1rem);
  max-width: 58rem;
}
.pp-attacco__sottotitolo {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--inchiostro-dolce);
  max-width: 56ch;
  margin: 0.9rem 0 0;
}
.pp-riferimenti {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  font-family: var(--fonte-tecnica);
  font-size: 0.8rem;
  color: var(--inchiostro-dolce);
  border-top: var(--filetto-fino);
  padding-top: 0.8rem;
}
.pp-riferimenti a { color: var(--inchiostro-dolce); }
.pp-riferimenti a:hover { color: var(--serpentino); }

.pp-paramento { margin: 0; }
.pp-paramento__vista {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--spigolo);
  border: var(--filetto-fino);
}

.pp-colonna {
  max-width: var(--misura);
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.9rem, 4.4vw, 3.2rem);
}
.pp-colonna > * + * { margin-top: 0.9em; }
.pp-colonna h2 {
  margin-top: 1.75em;
  padding-bottom: 0.26rem;
  border-bottom: var(--filetto-fino);
}
.pp-colonna h3 { margin-top: 1.35em; }
.pp-colonna ul, .pp-colonna ol { padding-left: 1.4rem; }
.pp-colonna li + li { margin-top: 0.45em; }
.pp-colonna strong { color: var(--serpentino-scuro); }
@media (prefers-color-scheme: dark) {
  .pp-colonna strong { color: #a9d3bd; }
}

/* Capolettera: la lettera iniziale di un saggio, come su un catalogo. */
.pp-colonna > p:first-of-type::first-letter {
  font-family: var(--fonte-titolo);
  font-weight: var(--titolo-peso);
  float: left;
  font-size: 3.05em;
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--serpentino);
}

/* La verifica: lista di controllo con quadratini da cava. */
.pp-verifica, .pp-colonna ul.pp-verifica {
  background: var(--marmo-vivo);
  border: var(--filetto-fino);
  border-left: 3px solid var(--serpentino);
  border-radius: var(--spigolo);
  padding: 1rem 1.25rem 1rem 2.1rem;
  font-size: 0.97em;
}
.pp-verifica li::marker { color: var(--serpentino); }

/* La nota: ricordo incartato su carta piu profonda. */
.pp-nota {
  background: var(--vena);
  border: var(--filetto-fino);
  border-radius: var(--spigolo);
  padding: 1rem 1.2rem;
  font-size: 0.95em;
}
.pp-nota p { margin: 0; }

/* Scheda tecnica: scheda scura su grigio piombo, titolo serpentino. */
.pp-scheda {
  margin: 1.7em 0;
  background: var(--piombo);
  color: var(--notte-testo);
  border-radius: var(--spigolo);
  padding: 1.15rem 1.3rem 1.25rem;
  border: 1px solid var(--filetto-notte);
}
.pp-scheda h2, .pp-scheda h3, .pp-scheda h4 {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.77rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino-chiaro);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.pp-scheda p, .pp-scheda ul { margin: 0; font-size: 0.95rem; color: var(--notte-testo); }
.pp-scheda strong { color: #fff; font-variant-numeric: tabular-nums; }
.pp-scheda p + p, .pp-scheda ul { margin-top: 0.5rem; }

/* La tavola: tabella da officina, intestazione su piombo. */
.pp-tavola {
  overflow-x: auto;
  margin: 1.5em 0;
  border: var(--filetto-fino);
  border-radius: var(--spigolo);
}
.pp-tavola table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92em;
}
.pp-tavola th, .pp-tavola td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--filetto);
  vertical-align: top;
}
.pp-tavola caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-family: var(--fonte-tecnica);
  font-size: 0.75rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino);
  border-bottom: 1px solid var(--filetto);
}
.pp-tavola thead th {
  background: var(--piombo);
  color: var(--notte-testo);
  font-family: var(--fonte-tecnica);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}
.pp-tavola tbody tr:last-child td { border-bottom: 0; }
.pp-tavola tbody tr:nth-child(even) { background: var(--marmo-vivo); }

/* Da leggere dopo. */
.pp-dopo {
  margin-top: 2.3em;
  padding-top: 1.15rem;
  border-top: 3px double var(--filetto);
}
.pp-dopo h2 {
  font-size: 1.18rem;
  border-bottom: 0;
  margin: 0 0 0.55rem;
}
.pp-dopo ul { list-style: none; margin: 0; padding: 0; }
.pp-dopo li { padding: 0.3rem 0; }
.pp-dopo li::before {
  content: "·";
  color: var(--serpentino);
  margin-right: 0.55rem;
  font-weight: 700;
}

/* =========================================================================
   IL PLINTO (piede)
   ========================================================================= */

.pp-plinto {
  margin-top: var(--respiro);
  background: var(--piombo);
  color: var(--notte-testo);
  box-shadow: inset 0 4px 0 var(--serpentino);
}
.pp-plinto__fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--canale) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.pp-plinto h2 {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.77rem;
  letter-spacing: var(--caps-interlettera);
  text-transform: uppercase;
  color: var(--serpentino-chiaro);
  margin-bottom: 0.7rem;
}
.pp-plinto ul { list-style: none; margin: 0; padding: 0; }
.pp-plinto li { padding-block: 0.22rem; }
.pp-plinto a { color: var(--notte-dolce); text-decoration: none; transition: color var(--velocita); }
.pp-plinto a:hover { color: var(--serpentino-chiaro); text-decoration: underline; }
.pp-plinto__fondo {
  border-top: 1px solid var(--filetto-notte);
  padding-block: 1.05rem;
  font-family: var(--fonte-tecnica);
  font-size: 0.78rem;
  color: var(--notte-dolce);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
}
.pp-plinto__fondo .pp-marchio { color: var(--serpentino-chiaro); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .pp-blocco--grande  { grid-column: span 6; }
  .pp-blocco--mezzo   { grid-column: span 3; }
  .pp-blocco--piccolo { grid-column: span 3; }
  .pp-blocco--scalino, .pp-blocco--scalino2 { transform: none; }
  .pp-apparecchio--denso { padding-bottom: 0; }
}

@media (max-width: 760px) {
  .pp-apparecchio { grid-template-columns: repeat(2, 1fr); }
  .pp-blocco--grande, .pp-blocco--mezzo, .pp-blocco--piccolo { grid-column: span 2; }
  .pp-materioteca { grid-template-columns: 1fr; }
  .pp-campione { grid-template-columns: 118px 1fr; }
  .pp-plinto__fila { grid-template-columns: 1fr; }
  .pp-cava__testo { padding-block: 2.5rem 2rem; }
  .pp-strato__testa { flex-direction: column; gap: 0.3rem; }
  .pp-colonna > p:first-of-type::first-letter {
    font-size: 2.7em;
    float: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
  }
}

@media (max-width: 480px) {
  .pp-campione { grid-template-columns: 1fr; }
  .pp-officine ul { gap: 0.35rem 0.95rem; }
}

/* Cortesia del movimento. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .pp-blocco:hover .pp-blocco__vista { transform: none; }
}

/* Stampa: un saggio di cava sulla carta. */
@media print {
  .pp-insegna, .pp-plinto, .pp-salta, .pp-filo, .pp-giunto { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .pp-colonna { max-width: none; }
  .pp-scheda { background: #fff; color: #000; border: 1pt solid #000; }
  .pp-cava__velo { background: rgba(35, 38, 42, 0.94); }
}