/* Home di Irene Carrer ricostruita sui mockup approvati.
   Ogni sezione e' uno "stadio" con le proporzioni del suo mockup: lo sfondo e' il mockup
   stesso ripulito dalle scritte, e sopra ci stanno testo, pulsanti e icone veri.
   Le posizioni sono in pixel del mockup (--x, --y, --w, --f) e diventano unita' che scalano
   con la larghezza: 1 px del mockup = 100cqw / --W. */

:root {
  --inchiostro: #141a15;
  --corpo: #3e423d;
  --corpo-forte: #1e221e;
  --etichetta: #4a5e45;
  --salvia: #6b7257;
  --cacao: #7a3d29;
  --cacao-2: #8c4c37;
  --crema: #f4f3eb;
  --linea: rgba(74, 94, 69, .45);
  /* TIPOGRAFIA CENTRALE: per cambiare il carattere dei titoli in tutto il sito basta
     --font-titoli. Le misure (--f) restano quelle del mockup. --serif e --sans sono alias. */
  --font-titoli: "Newsreader", Georgia, serif;
  --font-testo: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --peso-titoli: 450;
  --tracking-titoli: -.035em;
  --peso-sottotitoli: 400;
  --tracking-sottotitoli: -.03em;
  --serif: var(--font-titoli);
  --sans: var(--font-testo);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: rgb(239,236,233); }
body { font-family: var(--sans); color: rgb(74,63,58); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--etichetta); outline-offset: 3px; }

.st {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: var(--W) / var(--H);
  background-size: 100% 100%;
  overflow: hidden;
}
.st .a {
  position: absolute;
  margin: 0;
  left: calc(var(--x) * 100cqw / var(--W));
  top: calc(var(--y) * 100cqw / var(--W));
  width: calc(var(--w, 400) * 100cqw / var(--W));
  font-size: calc(var(--f, 16) * 100cqw / var(--W));
  line-height: var(--lh, 1.5);
}
/* misura in pixel del mockup, per altezze, spessori e distanze interne */
.st { --u: calc(100cqw / var(--W)); }

.serif { font-family: var(--serif); font-optical-sizing: auto; color: rgb(31,23,21); font-weight: 450; letter-spacing: -.035em; }
.serif i, .serif em { color: rgb(97,12,39); font-style: italic; font-weight: 400; }
.titolo { --lh: 1.0; }
.etichetta { color: rgb(97,12,39); letter-spacing: .005em; display: flex; align-items: center; gap: calc(16 * var(--u)); white-space: nowrap; }
.etichetta::after { content: ""; flex: none; width: calc(var(--riga, 156) * var(--u)); height: 1px; background: var(--linea); }
.etichetta.maiuscolo { text-transform: uppercase; letter-spacing: .09em; }
.etichetta.lunga::after { flex: 1; width: auto; }
.corpo { color: rgb(74,63,58); letter-spacing: .003em; }
.corpo.forte { color: rgb(31,23,21); }
.corpo p { margin: 0 0 calc(var(--spazio, 14) * var(--u)); }
.citazione { font-family: var(--serif); font-style: italic; color: #3f3b35; letter-spacing: -.01em; --lh: 1.3;
  border-left: 1px solid rgba(172,156,141,0.45); padding-left: calc(26 * var(--u)); }
.citazione.chiara { color: rgb(239,236,233); border-left-color: rgba(251, 248, 242, .6); text-shadow: 0 0 calc(12 * var(--u)) rgba(80, 55, 30, .25); }

/* pulsanti */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  background: rgb(97,12,39); color: #fbf3ee; text-decoration: none; border-radius: 999px;
  height: calc(var(--h) * var(--u)); font-weight: 500; letter-spacing: .005em; line-height: 1;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(80, 30, 15, .18);
}
.cta:hover { background: #69321f; }
.cta svg { width: 1.1em; height: 1.1em; flex: none; }
.link {
  display: inline-flex; align-items: center; gap: .6em; text-decoration: none; color: rgb(31,23,21);
  font-weight: 500; line-height: 1.6;
}
.link span { border-bottom: 1px solid currentColor; padding-bottom: .15em; }
.link svg { width: 1.15em; height: 1.15em; }

/* testata */
.marchio { text-decoration: none; display: block; }
.marchio b { display: block; font-family: var(--serif); font-weight: 500; color: rgb(31,23,21); letter-spacing: -.02em; font-size: calc(19 * var(--u)); line-height: 1.1; }
.marchio span { display: block; font-size: calc(10.2 * var(--u)); color: rgb(31,23,21); margin-top: calc(3 * var(--u)); letter-spacing: .01em; }
.menu { display: flex; justify-content: space-between; list-style: none; padding: 0; }
.menu a { text-decoration: none; color: #2b2f2a; letter-spacing: .01em; }
.menu a:hover { text-decoration: underline; text-underline-offset: .3em; }

/* foto di Irene nell'apertura */
.ritratto { object-fit: cover; object-position: 50% 18%; height: calc(var(--h) * var(--u));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%);
  mask-image: linear-gradient(to right, transparent 0, #000 16%); }

/* pilastri sotto l'apertura */
.pilastro small { display: block; font-family: var(--sans); color: rgb(74,63,58); font-size: .55em; letter-spacing: .02em; margin-bottom: .45em; }

/* elenco numerato "Partiamo da te" */
.voce { display: flex; gap: calc(52 * var(--u)); align-items: baseline; }
.voce .n { color: rgb(97,12,39); letter-spacing: 0; width: 2em; flex: none; font-size: 1.08em; }

/* colonne con titolo centrato */
.colonna { text-align: center; }
.colonna p { margin: calc(10 * var(--u)) 0 0; font-family: var(--sans); letter-spacing: .003em; color: rgb(74,63,58); font-size: calc(15.5 * var(--u)); line-height: 1.6; }

/* riquadri fotografici */
.riquadro { color: rgb(239,236,233); text-shadow: 0 1px calc(8 * var(--u)) rgba(30, 20, 10, .35); }

/* banda con icone in cerchio */
.cerchio { display: grid; place-items: center; border-radius: 50%; width: calc(var(--d) * var(--u)); height: calc(var(--d) * var(--u)); }
.cerchio.linea { border: 1.3px solid #4d5a47; color: #4d5a47; }
.cerchio.pieno { background: rgb(212,187,162); color: #4d5a47; }
.cerchio svg { width: 46%; height: 46%; stroke-width: 1.5; }
.divisore { width: 1px !important; background: rgba(90, 95, 80, .25); height: calc(var(--h) * var(--u)); }

/* sezione scura */
.scura .serif { color: rgb(239,236,233); }
.scura .serif i { color: rgb(212,187,162); }
.scura .corpo { color: #d5dad4; }
.menta { color: rgb(212,187,162); }
.tappa { text-align: center; color: rgb(239,236,233); }
.tappa .cerchio { margin: 0 auto calc(8 * var(--u)); border: 1.3px solid rgba(212,187,162,0.8); background: #16261b; color: rgb(239,236,233); font-family: var(--serif); font-size: calc(19 * var(--u)); }
.linea-o { height: 1px !important; background: rgba(212,187,162,0.45); }
.cta.serif-cta { font-family: var(--serif); font-weight: 400; background: #87412c; letter-spacing: .005em; box-shadow: 0 0 0 1px rgba(255, 220, 200, .12) inset; }

/* le sei dimensioni */
.dimensione { display: grid; grid-template-columns: calc(40 * var(--u)) 1fr; column-gap: calc(46 * var(--u)); align-items: start; }
.dimensione .lettera { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: #4a6b52; color: rgb(239,236,233); display: grid; place-items: center; font-family: var(--serif); font-size: calc(19 * var(--u)); grid-row: span 2; }
.dimensione h3 { margin: 0; font-family: var(--serif); font-weight: 450; color: rgb(31,23,21); letter-spacing: -.03em; font-size: calc(23 * var(--u)); line-height: 1.15; }
.dimensione p { margin: calc(4 * var(--u)) 0 0; color: rgb(74,63,58); font-size: calc(15.5 * var(--u)); line-height: 1.5; }
.filo { width: 1px !important; background: #9aab98; }

/* voci a due colonne con icona (sezione 8) e righe numerate (sezione 9.3) */
.beneficio h3 { margin: 0; font-family: var(--serif); font-weight: 450; color: rgb(31,23,21); letter-spacing: -.03em; font-size: calc(22 * var(--u)); line-height: 1.2; }
.beneficio p { margin: calc(8 * var(--u)) 0 0; color: rgb(74,63,58); font-size: calc(15.5 * var(--u)); line-height: 1.6; }
.riga-n { display: grid; grid-template-columns: calc(55 * var(--u)) 1fr; }
.riga-n .n { font-family: var(--serif); color: rgb(74,63,58); font-size: calc(18 * var(--u)); padding-top: calc(3 * var(--u)); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.etichetta.due { align-items: flex-start; }
.etichetta.due::after { margin-top: .72em; }
.dimensione p { font-size: calc(14.6 * var(--u)); margin-top: calc(2 * var(--u)); line-height: 1.45; }
.dimensione h3 { margin-top: calc(-4 * var(--u)); }