/* Sezione 4. Colori campionati sul mockup 4: cerchi #efebe0, tratto icone #4a5c42,
   filetto chiaro semitrasparente sulla foto, nomi #fbf8f2. */
.sfondo-s04 img { display: block; width: 100%; height: auto; }
.etichetta-s04 { color: rgb(97,12,39); letter-spacing: .005em; }
.filo-s04 { height: 1px; background: rgb(172,156,141); }
/* prima riga del titolo: il carattere del mockup e' piu' stretto di Newsreader */
#s04 .stretta { letter-spacing: calc(var(--tracking-titoli) - .038em); }
.card-s04 { list-style: none; margin: 0; padding: 0; }
.cerchio-s04 { height: calc(53 * var(--u)); border-radius: 50%; background: rgb(228,218,203); display: grid; place-items: center; list-style: none; }
.cerchio-s04 svg { width: 64%; height: 64%; fill: none; stroke: rgb(97,12,39); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.filetto-s04 { height: 1px; background: rgba(245, 238, 225, .55); list-style: none; }
.nome-s04 { color: rgb(239,236,233); letter-spacing: -.02em; list-style: none; text-shadow: 0 1px calc(6 * var(--u)) rgba(30, 20, 10, .35); }