/* ==========================================================================
   stph://zuliani — foglio di stile
   Caratteri: Besley (titoli) e Schibsted Grotesk (testo), ospitati in locale.
   ========================================================================== */

@font-face { font-family: "Besley"; src: url("../fonts/besley-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("../fonts/besley-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("../fonts/besley-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Besley"; src: url("../fonts/besley-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* --- Colori: tema chiaro (carta + penna blu) e scuro (notturno + verde punk) --- */
:root {
  --sfondo: #F8F6F1;
  --inchiostro: #17191F;
  --tenue: #5A5C63;
  --filo: #DFDAD0;
  --accento: #2638C9;
  --su-accento: #FFFFFF;

  --titoli: "Besley", Georgia, serif;
  --testo: "Schibsted Grotesk", system-ui, sans-serif;
  --larghezza: 1240px;
  --margine: clamp(20px, 5vw, 64px);
  --colonna: 680px;   /* larghezza del testo lungo */
  --a-lato: 256px;    /* larghezza delle note a margine */
  --stacco: 64px;     /* distanza tra testo e note */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --sfondo: #15171B; --inchiostro: #ECE8E0; --tenue: #A3A39C; --filo: #34373D; --accento: #C6F24E; --su-accento: #15171B;
    color-scheme: dark;
  }
}
:root[data-tema="scuro"] {
  --sfondo: #15171B; --inchiostro: #ECE8E0; --tenue: #A3A39C; --filo: #34373D; --accento: #C6F24E; --su-accento: #15171B;
  color-scheme: dark;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
main { counter-reset: nota; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { opacity: .72; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
em, i { font-style: italic; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 14px; background: var(--accento); color: var(--su-accento); }

.pagina { max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--margine); }

.etichetta {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.etichetta--accento { color: var(--accento); }
.tenue { color: var(--tenue); }
.link-forte { align-self: flex-start; display: inline-block; padding: 10px 0; font-weight: 600; }

.bottone {
  display: inline-flex; align-items: center;
  min-height: 52px; padding: 0 26px;
  background: var(--accento); color: var(--su-accento);
  font-weight: 600; font-size: 1rem; text-decoration: none;
}
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* rimando numerato (apice) e nota accanto a un titolo */
.rif {
  margin-left: 4px;
  font-family: var(--testo);
  font-size: .24em;
  font-style: normal;
  font-weight: 600;
  color: var(--accento);
  vertical-align: super;
}
.nota-a-lato {
  flex: 1 1 220px; min-width: 0; max-width: 300px;
  align-self: flex-end;
  display: flex; gap: 10px;
  font-size: .90625rem; line-height: 1.5;
  color: var(--accento);
}
.nota-a-lato > span:first-child { font-weight: 600; }

/* --- Testata --- */
.testata {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 32px; padding: 18px 0;
  border-bottom: 1px solid var(--filo);
}
.logo { padding: 10px 0; font-family: var(--titoli); font-weight: 600; font-size: 1.4375rem; letter-spacing: -.01em; text-decoration: none; }
.logo span { color: var(--accento); }
.testata-destra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.testata nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: .9375rem; font-weight: 500; }
.testata nav a { padding: 10px 0; text-decoration: none; }
.testata nav a[aria-current="page"] { text-decoration: underline; }
.tema {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  background: none; border: 1px solid var(--filo); border-radius: 999px;
  color: var(--inchiostro); font: 500 .875rem var(--testo); cursor: pointer;
}
.tema[hidden] { display: none; }

/* --- Home: apertura --- */
.hero { display: flex; flex-wrap: wrap; gap: 40px 64px; padding: clamp(64px, 10vw, 140px) 0 clamp(56px, 8vw, 104px); }
.hero-testo { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.hero h1 {
  margin: 0;
  font-family: var(--titoli); font-weight: 600;
  font-size: clamp(2.75rem, 6.6vw, 5.6875rem); /* fino a 91px */
  line-height: 1.1; letter-spacing: -.02em;
}
.hero h1 em { font-weight: 400; }
.hero-sotto { margin: 0; max-width: 620px; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: var(--tenue); }

.servizi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 48px;
  padding: 40px 0 72px; border-top: 1px solid var(--inchiostro);
}
.servizi h2 { margin: 0 0 10px; font: 600 1.625rem/1.2 var(--titoli); }
.servizi p { margin: 0; color: var(--tenue); }

/* --- Home: indice dei lavori --- */
.indice { padding: 32px 0 96px; }
.indice-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; padding-bottom: 40px; }
.indice-testa h2 { margin: 0; font: 600 clamp(2.625rem, 5.2vw, 4.25rem)/1.1 var(--titoli); letter-spacing: -.02em; }
.indice-testa p { margin: 0; font-size: .9375rem; color: var(--tenue); }
.parte-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; margin: 0 0 8px; }
.parte-testa p { margin: 0; font-size: .90625rem; color: var(--accento); }

.capitoli-lista, .brevi { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--filo); }
.capitoli-lista { margin-bottom: 72px; }
.riga {
  display: flex; align-items: baseline; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--filo); text-decoration: none;
}
.riga:hover, .breve:hover { opacity: 1; }
.riga:hover .riga-titolo, .breve:hover .riga-titolo { text-decoration: underline; text-underline-offset: 6px; }
.riga-num { flex: 0 0 52px; font: 600 1.375rem var(--titoli); color: var(--accento); }
.riga-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.riga-titolo { font: 600 clamp(1.5rem, 2.7vw, 2.25rem)/1.12 var(--titoli); }
.riga-titolo em { font-weight: 400; color: var(--tenue); }
.riga-cosa { font-size: .9375rem; color: var(--tenue); }
.riga-puntini { flex: 1 1 24px; min-width: 24px; border-bottom: 1px dotted var(--tenue); }
.riga-anno { flex: 0 0 auto; font-size: .9375rem; font-variant-numeric: tabular-nums; color: var(--tenue); }
@media (max-width: 600px) {
  .riga { gap: 12px; }
  .riga-num { flex-basis: 40px; }
  .riga-puntini { display: none; }
}

.brevi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); column-gap: 48px; }
.breve { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 0; border-top: 1px solid var(--filo); text-decoration: none; }
.breve .riga-titolo { font-size: 1.375rem; line-height: 1.2; }
.breve .riga-cosa { font-size: .90625rem; }

/* --- Home: chi sono, blog, contatti --- */
.chi { display: flex; flex-wrap: wrap; gap: 32px 64px; padding: 72px 0 96px; border-top: 1px solid var(--inchiostro); }
.chi > h2 { flex: 1 1 160px; }
.chi-corpo { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1060px) { .chi-corpo { padding-right: calc(var(--a-lato) + var(--stacco)); } }
.chi-corpo p { margin: 0; }
.grande { font: 400 clamp(1.5625rem, 2.7vw, 2.25rem)/1.3 var(--titoli); letter-spacing: -.01em; }
.chi-corpo .tenue { max-width: 620px; }

.fascia-blog {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 40px;
  padding: 40px 0; border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo);
}
.fascia-blog p { margin: 0; font: italic 400 clamp(1.375rem, 2.3vw, 1.875rem)/1.3 var(--titoli); }
.fascia-blog a { padding: 10px 0; font-weight: 600; color: var(--accento); }

.contatti { display: flex; flex-direction: column; gap: 32px; padding: clamp(72px, 9vw, 128px) 0; }
.contatti h2 { margin: 0; max-width: 920px; font: 600 clamp(2.625rem, 6vw, 5.375rem)/1.02 var(--titoli); letter-spacing: -.02em; }
.contatti h2 em { font-weight: 400; }
.social { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: .9375rem; color: var(--tenue); }
.social a { padding: 10px 0; }

/* --- Pagine interne --- */
.testa-pagina { display: flex; flex-wrap: wrap; gap: 40px 64px; padding: clamp(56px, 8vw, 112px) 0 48px; }
.testa-pagina-corpo { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.lavoro .testa-pagina { flex-direction: column; flex-wrap: nowrap; gap: 28px; }
.testa-pagina h1 {
  margin: 0; max-width: 1000px;
  font: 600 clamp(2.875rem, 6.8vw, 6.25rem)/1 var(--titoli); letter-spacing: -.02em;
}
.testa-pagina h1 em { font-weight: 400; color: var(--tenue); }

.scheda {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px 40px;
  margin: 0; padding: 28px 0;
  border-top: 1px solid var(--inchiostro); border-bottom: 1px solid var(--filo);
  font-size: .9375rem;
}
.scheda div { display: flex; flex-direction: column; gap: 4px; }
.scheda dt { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.scheda dd { margin: 0; }

/* --- Testo lungo con note a margine --- */
.prosa { padding: 56px 0 48px; line-height: 1.6; }
.prosa > * { max-width: var(--colonna); }
.prosa p { margin: 0 0 1.1em; }
.prosa > p:first-child { font: 400 clamp(1.4375rem, 2.4vw, 1.9375rem)/1.36 var(--titoli); }
.prosa h2 { margin: 2em 0 .5em; font: 600 2rem/1.15 var(--titoli); }
.prosa h3 { margin: 1.8em 0 .4em; font: 400 1.5rem/1.25 var(--titoli); }
.prosa h3 em { font-weight: 600; }
.prosa h2 + h3 { margin-top: .8em; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa blockquote { margin: 1.5em 0; padding: 0; font: italic 400 1.5rem/1.4 var(--titoli); }

/* il numero nel testo e la nota corrispondente: numerazione automatica */
.nota-rif::after {
  counter-increment: nota;
  content: counter(nota);
  margin-left: 2px;
  font: 600 .7em var(--testo);
  color: var(--accento);
  vertical-align: super;
}
.nota {
  display: block;
  margin: .6em 0 1em;
  font: 400 .90625rem/1.5 var(--testo);
  color: var(--accento);
}
.nota::before { content: counter(nota); margin-right: 10px; font-weight: 600; }
.nota a { color: inherit; }

@media (min-width: 1060px) {
  .prosa { padding-right: calc(var(--a-lato) + var(--stacco)); }
  .nota {
    float: right; clear: right;
    width: var(--a-lato);
    margin: .35em calc(-1 * (var(--a-lato) + var(--stacco))) 1em 0;
  }
  .prosa > .figura { max-width: none; margin-right: calc(-1 * (var(--a-lato) + var(--stacco))); }
}

.figura { margin: 40px 0 56px; }
.figura img { display: block; width: 100%; }
.figura figcaption { margin-top: 12px; font-size: .875rem; color: var(--tenue); }

/* galleria: 2 o 3 post affiancati in formato 4:5 */
.galleria-griglia { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(8px, 1.5vw, 16px); }
.galleria-griglia > a, .galleria-griglia > img { display: block; min-width: 0; }
.galleria-griglia > a:hover { opacity: .85; }
.galleria-griglia img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--filo); }

/* galleria con le immagini intere, senza ritaglio */
.galleria--intera .galleria-griglia { align-items: start; }
.galleria--intera .galleria-griglia img { aspect-ratio: auto; object-fit: fill; height: auto; }

/* Chi sono: i capitoli si numerano da soli (I, II, III…) */
.capitoli { counter-reset: nota capitolo; }
.capitoli h2 { counter-increment: capitolo; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--filo); }
.capitoli h2::before {
  content: counter(capitolo, upper-roman) ".";
  display: block; margin-bottom: 4px;
  font-size: 1.375rem; color: var(--accento);
}
.chiusa {
  max-width: 900px !important;
  margin: 72px 0 0 !important;
  padding: clamp(56px, 7vw, 96px) 0 0;
  border-top: 1px solid var(--inchiostro);
  font: italic 400 clamp(1.75rem, 3.4vw, 2.875rem)/1.25 var(--titoli) !important;
}

/* 404: tutto il testo è racconto */
.racconto p { font: 400 clamp(1.3125rem, 2vw, 1.5625rem)/1.5 var(--titoli); }
.racconto .azioni { padding-top: 12px; }

.cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 40px 0 72px; border-top: 1px solid var(--filo);
}
.cta p { margin: 0; font: 600 clamp(1.5rem, 2.6vw, 2.125rem)/1.2 var(--titoli); }

.naviga-capitoli {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 48px;
  padding: 40px 0 72px; border-top: 1px solid var(--inchiostro);
}
.naviga-capitoli a { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; text-decoration: none; }
.naviga-succ { text-align: right; }
.naviga-titolo { font: 600 1.75rem/1.2 var(--titoli); }

/* --- Colophon --- */
.colophon {
  display: flex; flex-wrap: wrap; gap: 24px 64px;
  padding: 40px 0 64px; border-top: 1px solid var(--inchiostro);
  font-size: .875rem; line-height: 1.6; color: var(--tenue);
}
.colophon h2 { flex: 1 1 160px; margin: 0; font: italic 400 1.5rem var(--titoli); color: var(--inchiostro); }
.colophon p { margin: 0; }
.colophon p:nth-of-type(1) { flex: 3 1 360px; }
.colophon p:nth-of-type(2) { flex: 2 1 260px; }

/* ritratto nella testata di Chi sono */
.testa-pagina-lato { flex: 1 1 220px; min-width: 0; max-width: 300px; align-self: flex-end; display: flex; flex-direction: column; gap: 16px; }
.testa-pagina-lato .nota-a-lato { flex: none; max-width: none; align-self: auto; }
.ritratto { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--filo); }