/* francescachilli.com — foglio di stile unico. Una sola famiglia (Jost), bianco, nero, un magenta. */
:root {
  --bianco: #ffffff;
  --nero: #161616;
  --grigio: #6f6a66;
  --linea: #e6e3e0;
  --magenta: #e5007d;
  --colonna: 40rem;      /* ~64 caratteri a 18px */
  --larga: 80rem;
  --spazio: clamp(1.25rem, 4vw, 3rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--nero);
  font-family: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
}
body.luce-aperta { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p a, .rimandi a, .avanti a, .contatto a, .piede a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover, a:focus-visible { text-decoration-color: var(--magenta); }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
h1, h2, h3 { font-weight: 300; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -0.005em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); }
p { margin: 0 0 1.2em; }
.colonna { max-width: var(--colonna); margin-inline: auto; padding-inline: var(--spazio); }
.fascia { max-width: var(--larga); margin-inline: auto; padding-inline: clamp(.375rem, 1.5vw, 1.5rem); }
.grande { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.35; font-weight: 300; }

/* testata */
.testata {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  max-width: var(--larga); margin-inline: auto; padding: 1.5rem var(--spazio) 1.25rem;
}
.marchio { display: inline-flex; flex-direction: column; line-height: 1.1; }
.marchio-nome { font-weight: 300; font-size: 1.25rem; letter-spacing: .18em; text-transform: uppercase; }
.marchio-nome::after { content: "."; color: var(--magenta); font-weight: 500; }
.marchio-ruolo { font-size: .8125rem; color: var(--grigio); letter-spacing: .08em; margin-top: .25rem; }
.menu { display: flex; gap: clamp(1rem, 3vw, 2.25rem); font-size: 1rem; }
.menu a { white-space: nowrap; }
.menu a { padding-bottom: .15em; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a:focus-visible { border-color: var(--magenta); text-decoration: none; }
.menu a[aria-current="page"] { border-color: var(--nero); }

@media (max-width: 40rem) {
  .testata { flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.25rem; padding-block: 1.125rem 1rem; }
  .marchio-nome { font-size: 1.05rem; letter-spacing: .14em; white-space: nowrap; }
  .menu { font-size: .9375rem; gap: 1.125rem; }
}

/* home */
.apertura { max-width: var(--larga); margin-inline: auto; padding-inline: clamp(.375rem, 1.5vw, 1.5rem); }
.apertura-foto { width: 100%; height: min(78svh, 46rem); object-fit: cover; object-position: center 35%; }
.presentazione { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem); }
.presentazione .grande { margin: 0; }
.testi { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 6vw, 4rem); }
.testo + .testo { margin-top: 2.5rem; }
.rimandi { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }

/* griglia giustificata */
.griglia { display: flex; flex-wrap: wrap; gap: 6px; }
.scatto { position: relative; display: block; overflow: hidden; background: #f2f0ee; }
.scatto i { display: block; }
.scatto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scatto-riempi { flex-grow: 600; } /* le orfane dell'ultima riga restano vicine all'altezza di riga */
@media (max-width: 40rem) {
  .griglia { gap: 4px; }
  .scatto { flex-basis: 0 !important; min-width: 45%; }
}

/* intestazioni di sezione */
.intestazione { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.intestazione h1 { margin-bottom: .5em; }
.sottotitolo, .percorso, .capitolo-conta, .piede-nota { color: var(--grigio); font-size: .9375rem; }
.percorso { margin-bottom: 1.5rem; }
.avanti { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(2.5rem, 6vw, 4rem); }
.avanti-succ { margin-left: auto; }

/* matrimoni: la sequenza dei capitoli, il gesto forte della pagina */
.capitoli { list-style: none; margin: 0 auto; padding: 0 clamp(.375rem, 1.5vw, 1.5rem) clamp(2rem, 6vw, 4rem); max-width: var(--larga); }
.capitolo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: end; padding-block: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--linea); }
.capitolo:first-child { border-top: 0; }
.capitolo:nth-child(even) .capitolo-foto { order: 2; }
.capitolo-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #fff; }
.capitolo-numero { display: block; font-weight: 200; font-size: clamp(4rem, 9vw, 8rem); line-height: .85; color: var(--nero); margin-bottom: .5rem; }
.capitolo-testo h2 { margin-bottom: .5em; }
.capitolo-testo h2 a:hover { text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: .15em; }
.capitolo-testo p { max-width: 34rem; }
.capitolo-conta { margin: 0; }
@media (max-width: 48rem) {
  .capitolo { grid-template-columns: 1fr; align-items: start; }
  .capitolo:nth-child(even) .capitolo-foto { order: 0; }
  .capitolo-numero { font-size: 4rem; }
}

/* chi sono */
.chi-sono { max-width: var(--larga); margin-inline: auto; padding: clamp(1rem, 3vw, 2.5rem) clamp(.375rem, 1.5vw, 1.5rem) clamp(2rem, 6vw, 4rem); }
.chi-sono-foto { margin: 0 0 clamp(2rem, 5vw, 3.5rem); }
.chi-sono-foto img { width: 100%; max-height: 34rem; object-fit: cover; object-position: center 30%; }
.chi-sono-testo h1 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.contatto { margin-top: 2rem; }

/* piede */
.piede { background: #000; color: #fff; margin-top: clamp(2rem, 6vw, 4rem); padding: clamp(2rem, 5vw, 3.5rem) var(--spazio); font-size: .9375rem; }
.piede p { max-width: var(--larga); margin: 0 auto .5em; }
.piede a:hover { text-decoration-color: var(--magenta); }
.piede-nota { color: #8f8a86; }

/* lightbox */
.luce { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .96); display: flex; align-items: center; justify-content: center; }
.luce[hidden] { display: none; }
.luce-img { max-width: calc(100vw - 2rem); max-height: calc(100svh - 2rem); width: auto; height: auto; object-fit: contain; }
.luce button { position: absolute; background: none; border: 0; color: #fff; font: inherit; font-size: 2.5rem; line-height: 1; font-weight: 200; padding: .75rem 1rem; cursor: pointer; }
.luce button:hover, .luce button:focus-visible { color: var(--magenta); outline-color: #fff; }
.luce-chiudi { top: .5rem; right: .75rem; }
.luce-prec { left: .25rem; top: 50%; transform: translateY(-50%); }
.luce-succ { right: .25rem; top: 50%; transform: translateY(-50%); }
.luce-conta { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); margin: 0; color: #a9a4a0; font-size: .875rem; }
@media (max-width: 40rem) { .luce-prec, .luce-succ { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .menu a, a, .luce button { transition: color .15s, border-color .15s, text-decoration-color .15s; }
}