/* Classi tipografiche (usate per ora dalla sezione 1; le altre sezioni le adotteranno una alla volta).
   Famiglia, peso e spaziatura vengono solo dai token in mockup.css. */
.tipo-display { font-family: var(--font-titoli); font-optical-sizing: auto; font-weight: var(--peso-titoli); letter-spacing: var(--tracking-titoli); color: rgb(31,23,21); }
.tipo-display i { color: rgb(97,12,39); font-style: italic; font-weight: 400; }
.tipo-sottotitolo { font-family: var(--font-titoli); font-optical-sizing: auto; font-weight: var(--peso-sottotitoli); letter-spacing: var(--tracking-sottotitoli); color: rgb(31,23,21); }
.tipo-corpo { font-family: var(--font-testo); color: rgb(74,63,58); letter-spacing: .003em; }
.tipo-corpo.forte { color: rgb(31,23,21); }
.tipo-corpo p { margin: 0; }
.tipo-etichetta, .tipo-nav, .tipo-cta { font-family: var(--font-testo); }
.tipo-marchio b { font-family: var(--font-titoli); }
/* i ritorni a capo li decide il mockup, non il browser */
.righe-fisse { white-space: nowrap; }

/* ---------------------------------------------------------------- SEZIONE 1 senza raster
   Fondo, testata e striscia dei pilastri in CSS, coi colori campionati sul mockup:
   crema #f9f7f1 che scende a #f7f4ec, testata #fbf9f5 con filo #e6e5e2,
   striscia #f8f6ef -> #f3f0e7 con filo #ebe9e3. */
.st-apertura {
  background:
    radial-gradient(ellipse calc(260 * var(--u)) calc(420 * var(--u)) at calc(560 * var(--u)) calc(300 * var(--u)),
      rgba(226, 211, 188, .55), rgba(226, 211, 188, 0) 70%),
    linear-gradient(180deg, #f9f7f1 0%, #f9f7f1 45%, #f8f5ee 70%, #f7f4ec 84%);
}
.apertura-foto { overflow: hidden; height: calc(var(--h) * var(--u)); }
.apertura-foto img {
  position: absolute; display: block; max-width: none; height: auto;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
.testata-fondo { height: calc(var(--h) * var(--u)); background: rgba(239,236,233,0.74); border-bottom: 1px solid #e6e5e2; }
.striscia-fondo { height: calc(var(--h) * var(--u)); background: linear-gradient(180deg, #f8f6ef 0%, #f6f3eb 50%, #f3f0e7 100%); border-top: 1px solid #ebe9e3; }
.fogliame { height: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.icona-s01 svg { display: block; width: 100%; height: auto; fill: none; stroke: rgb(97,12,39); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.divisore-s01 { width: 1px !important; height: calc(var(--h) * var(--u)); background: #a9aba1; opacity: .8; }

/* luce calda tra il testo e Irene: nel mockup quella fascia e' parete chiara al sole.
   Piena in alto (dietro i titoli), si apre verso il basso dove ci sono le braccia. */
.apertura-luce {
  height: calc(var(--h) * var(--u));
  background: linear-gradient(to right, #f9f7f1 0%, #f9f7f1 25%, rgba(246, 240, 228, .82) 50%, rgba(240, 230, 212, .35) 75%, rgba(240, 230, 212, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0,0,0,.45) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0,0,0,.45) 100%);
}

/* numeri dei pilastri: nel mockup piu' staccati dal titolo */
#s01 .pilastro small { margin-bottom: .85em; }
#s01 .marchio span { margin-top: calc(1 * var(--u)); }