/* FILE GENERATO da tools/build_noi3.py — sorgente: prototypes/m6/assets/noi3.css */
/* ============================================================
   Noi 3.0 (M-6) · mockup · si carica DOPO css/home3.css
   Fotografie storiche in composizioni editoriali, cronologia con
   filo che si riempie mentre si scorre (nessuno scroll-jacking),
   sostenibilità, chiusura verso Maison / Hotellerie / contatti.
   ============================================================ */
.n-eyebrow { font: 400 11px/1.3 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted); }
.n-sec { padding-block: clamp(5rem, 10vw, 9rem); }
.n-dark { background: #2B241F; color: #F3EEE6; --c-muted: rgba(243,238,230,.62); --c-line: rgba(243,238,230,.16); }

/* ---- hero editoriale ---- */
.n-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem)) var(--gutter) clamp(3rem, 6vw, 5rem); align-items: end; min-height: 100svh; }
.n-hero__t { grid-column: 1 / 6; display: grid; gap: 1.6rem; padding-bottom: 1rem; }
.n-hero__t h1 { font: 300 clamp(3.6rem, 8vw, 8.4rem)/.92 var(--f-serif); letter-spacing: -.02em; }
.n-hero__t h1 em { font-style: italic; }
.n-hero__t p { max-width: 26rem; color: var(--c-muted); font-size: 1.02rem; line-height: 1.6; }
.n-hero__ph { grid-column: 6 / 13; margin: 0; position: relative; }
.n-hero__ph img { width: 100%; aspect-ratio: 1678 / 1251; object-fit: cover; display: block; filter: grayscale(1) contrast(1.04); }
.n-hero__ph figcaption, .n-fig figcaption { margin-top: .8rem; font: 400 10.5px/1.4 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); display: flex; justify-content: space-between; gap: 1rem; }
.n-hero__year { position: absolute; left: -.06em; bottom: -.32em; transform: translateX(-62%); font: italic 300 clamp(5rem, 11vw, 11rem)/1 var(--f-serif); color: var(--c-ink); pointer-events: none; }

/* ---- cronologia ---- */
.tl3 { position: relative; padding-inline: var(--gutter); --rail: calc(var(--gutter) + clamp(5.5rem, 11vw, 10rem)); }
.tl3__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-bottom: clamp(3rem, 6vw, 5rem); }
.tl3__head > div { grid-column: 1 / 8; display: grid; gap: 1rem; }
.tl3__rail { position: absolute; top: 0; bottom: 0; left: var(--rail); width: 1px; background: var(--c-line); }
.tl3__rail i { position: absolute; inset: 0; background: var(--c-ink); transform-origin: top; transform: scaleY(var(--tp, 0)); }
.tl3__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3.5rem, 8vw, 7rem); position: relative; }
.ev { display: grid; grid-template-columns: clamp(5.5rem, 11vw, 10rem) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem); position: relative; }
.ev::before { content: ""; position: absolute; left: clamp(5.5rem, 11vw, 10rem); top: .55rem; width: 9px; height: 9px; border-radius: 50%; translate: -50% 0; background: var(--c-page); border: 1px solid var(--c-ink); transition: background .5s; }
.ev.on::before { background: var(--c-ink); }
.ev__y { font: italic 300 clamp(1.3rem, 2vw, 1.9rem)/1.05 var(--f-serif); padding-right: 1.2rem; text-align: right; }
.ev__b { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ev__t { grid-column: 1 / 6; display: grid; gap: .9rem; }
.ev__t h3 { font: 300 clamp(1.8rem, 3vw, 2.8rem)/1.05 var(--f-serif); letter-spacing: -.01em; }
.ev__t blockquote { margin: 0; color: var(--c-muted); font-size: 1rem; line-height: 1.7; max-width: 32rem; }
/* tappe con fotografia: doppia pagina, foto alternata a destra e a sinistra */
.ev--ph .ev__t { grid-column: 1 / 5; align-self: end; }
.ev--ph .n-fig { grid-column: 5 / 11; }
.ev--ph.ev--r .ev__t { grid-column: 7 / 11; order: 2; }
.ev--ph.ev--r .n-fig { grid-column: 1 / 7; }
.ev--big .ev__t h3 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.n-fig { margin: 0; }
.n-fig img { width: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.n-fig--ill img { filter: none; background: var(--c-surface); object-fit: contain; aspect-ratio: 4 / 3; padding: clamp(1rem, 3vw, 2.5rem); }
.n-fig--col img { filter: none; }
/* comparsa: la foto si scopre dal basso, il testo sale (solo se il movimento non è ridotto) */
.js .ev .n-fig img { clip-path: inset(14% 0 0 0); transition: clip-path 1.4s var(--ease-soft); }
.js .ev.in .n-fig img { clip-path: inset(0); }
.js .ev .ev__t { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.js .ev.in .ev__t { opacity: 1; transform: none; }

/* ---- oggi ---- */
.n-today { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--gutter); }
.n-today > div { grid-column: 2 / 12; display: grid; gap: 1.8rem; }
.n-today blockquote { margin: 0; font: 300 clamp(2rem, 4.2vw, 4rem)/1.12 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }

/* ---- sostenibilità ---- */
.n-sust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(3rem, 6vw, 5rem); padding-inline: var(--gutter); }
.n-sust__h { grid-column: 1 / 7; display: grid; gap: 1rem; }
.n-sust__h h2 { font: 300 clamp(2.4rem, 4.6vw, 4.4rem)/1 var(--f-serif); letter-spacing: -.015em; }
.n-sust__h h2 em { font-style: italic; }
.n-sust__lead { grid-column: 7 / 13; align-self: end; font: 300 clamp(1.2rem, 1.7vw, 1.5rem)/1.45 var(--f-serif); }
.n-pill3 { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-ink); }
.n-pill3 li { padding: 1.6rem 2rem 0 0; display: grid; gap: 1.4rem; }
.n-pill3 li + li { padding-left: 2rem; border-left: 1px solid var(--c-line); }
.n-pill3 span { font: italic 300 2.6rem/1 var(--f-serif); color: var(--c-muted); }
.n-pill3 b { font: 300 clamp(1.4rem, 2.2vw, 2rem)/1.15 var(--f-serif); }
.n-sust__txt { grid-column: 3 / 13; columns: 2 22rem; column-gap: var(--gutter); }
.n-sust__txt p { color: var(--c-muted); line-height: 1.75; margin: 0 0 1.2rem; break-inside: avoid; }
.n-sust__ph { grid-column: 1 / 3; margin: 0; align-self: start; }
.n-sust__ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.n-flag { font: 400 11px/1.4 var(--f-sans); background: #FFF1C2; color: #5A4300; padding: .3rem .5rem; display: inline-block; }

/* ---- chiusura ---- */
.n-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.5vw, 1.5rem); padding-inline: var(--gutter); }
.n-next a { position: relative; display: grid; align-content: end; min-height: clamp(22rem, 38vw, 34rem); padding: 1.6rem; color: #F3EEE6; text-decoration: none; overflow: hidden; background: #2B241F; }
.n-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.n-next a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,13,.7), rgba(20,16,13,0) 60%); }
.n-next a > span { position: relative; z-index: 1; display: grid; gap: .5rem; }
.n-next small { font: 400 10.5px/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.n-next b { font: 300 clamp(2rem, 3.2vw, 3rem)/1 var(--f-serif); }
.n-next a:hover img { transform: scale(1.04); }
.n-next__h { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--gutter); margin-bottom: 2.5rem; }
.n-next__h h2 { grid-column: 1 / 8; font: 300 clamp(2.2rem, 4.2vw, 3.8rem)/1 var(--f-serif); }
.n-next__h h2 em { font-style: italic; }

/* ---- smartphone ---- */
@media (max-width: 860px) {
  .n-hero { min-height: 0; row-gap: 2.5rem; padding-top: calc(var(--nav-h) + 1.5rem); }
  .n-hero__t, .n-hero__ph { grid-column: 1 / -1; }
  .n-hero__ph { order: -1; }
  .n-hero__year { transform: none; left: auto; right: .1em; bottom: -.4em; font-size: 5.2rem; color: var(--c-page); mix-blend-mode: difference; }
  .tl3 { --rail: calc(var(--gutter) + 4px); }
  .ev { grid-template-columns: 1fr; padding-left: 1.6rem; row-gap: .8rem; }
  .ev::before { left: 4px; }
  .ev__y { text-align: left; padding: 0; }
  .ev__b { grid-template-columns: 1fr; row-gap: 1.3rem; }
  .ev__t, .ev--ph .ev__t, .ev--ph.ev--r .ev__t, .ev--ph .n-fig, .ev--ph.ev--r .n-fig { grid-column: 1 / -1; order: 0; }
  .ev--ph .n-fig { order: -1; }
  .n-today > div { grid-column: 1 / -1; }
  .n-sust__h, .n-sust__lead, .n-sust__txt { grid-column: 1 / -1; }
  .n-sust__ph { display: none; }
  .n-pill3 { grid-template-columns: 1fr; }
  .n-pill3 li, .n-pill3 li + li { padding: 1.3rem 0; border-left: 0; border-bottom: 1px solid var(--c-line); grid-template-columns: 3.5rem 1fr; align-items: baseline; }
  .n-next { grid-template-columns: 1fr; }
  .n-next a { min-height: 15rem; }
  .n-next__h h2 { grid-column: 1 / -1; }
}
/* movimento ridotto o senza JavaScript: tutto nello stato finale, filo pieno */
.rm .tl3__rail i { transform: none; }
.rm .ev::before { background: var(--c-ink); }
.rm .js .ev .n-fig img, .rm .ev .n-fig img { clip-path: none; transition: none; }
.rm .ev .ev__t { opacity: 1; transform: none; transition: none; }

/* proporzioni fisse delle foto (le regole generali di home3.css le farebbero riempire il contenitore) */
.n-hero__ph img, .n-fig img { height: auto; max-height: 82svh; }
.n-hero__ph img { aspect-ratio: 4 / 3; }
.ev--ph .n-fig img { aspect-ratio: 4 / 3; }
.n-fig--ill img { aspect-ratio: 4 / 3; }
.n-fig--col img { aspect-ratio: 1 / 1; }
/* nav su fondo chiaro fin dall'apertura (come le altre pagine senza foto a tutto schermo) */
.nav:not(.is-solid) { color: var(--c-ink); background: var(--c-page); }
.nav:not(.is-solid)::before { opacity: 0; }
.nav:not(.is-solid) .nav__logo img { filter: brightness(0) opacity(.86); }
/* l'anno si appoggia in alto sulla foto, lontano dal collegamento */
.n-hero__year { bottom: auto; top: -.42em; transform: translateX(-42%); }
@media (max-width: 860px) { .n-hero__year { top: auto; bottom: -.38em; transform: none; } }

/* ============================================================
   M-10b · pagina più compatta: meno spazio, foto storiche più piccole,
   tappe più ravvicinate. Il filo della cronologia continua a riempirsi.
   ============================================================ */
@media (min-width: 861px) {
  .n-sec { padding-block: clamp(3.5rem, 6vw, 6rem); }
  .n-hero { min-height: 0; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
  .n-hero__ph { grid-column: 7 / 13; }
  .n-hero__ph img { max-height: 62svh; }
  .tl3__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
  .tl3__list { gap: clamp(2rem, 3.6vw, 3.25rem); }
  .ev__t h3 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
  .ev--big .ev__t h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
  .ev--ph .ev__t { grid-column: 1 / 6; align-self: center; }
  .ev--ph .n-fig { grid-column: 6 / 11; }
  .ev--ph.ev--r .ev__t { grid-column: 6 / 11; }
  .ev--ph.ev--r .n-fig { grid-column: 1 / 6; }
  .ev--ph .n-fig img { aspect-ratio: 3 / 2; max-height: 46svh; }
  .n-fig--col img { aspect-ratio: 4 / 3; }
  /* le tappe senza foto si affiancano al testo in larghezza: righe più basse */
  .ev:not(.ev--ph) .ev__t { grid-column: 1 / 9; }
  .n-today blockquote { font-size: clamp(1.8rem, 3.2vw, 3rem); }
  .n-sust { row-gap: clamp(2rem, 4vw, 3rem); }
  .n-next a { min-height: clamp(18rem, 28vw, 26rem); }
}
@media (max-width: 860px) {
  .n-sec { padding-block: 3.5rem; }
  .tl3__list { gap: 2.5rem; }
}

/* ============================================================
   M-10d · cronologia «A · Timeline editoriale compatta» (mockup M-11 approvato)
   ============================================================ */
.sa { padding-inline: var(--gutter); }
.sa__head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sa__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sa__tl { position: relative; padding-left: 1.6rem; }
.sa__tl ol { list-style: none; margin: 0; padding: 0; }
.sa .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--c-line); }
.sa .rail i { position: absolute; inset: 0; background: var(--c-ink); transform-origin: top; transform: scaleY(var(--tp, 0)); }
.sa-ev { position: relative; display: grid; grid-template-columns: 8.5rem 1fr; column-gap: 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--c-line); }
.sa-ev::before { content: ""; position: absolute; left: -1.6rem; top: 1.55rem; width: 9px; height: 9px; border-radius: 50%; translate: -4px 0; background: var(--c-page); border: 1px solid var(--c-ink); transition: background .4s; }
.sa-ev.on::before { background: var(--c-ink); }
.sa-ev__y { font: italic 300 1.3rem/1.2 var(--f-serif); color: var(--c-muted); }
.sa-ev h3 { font: 300 clamp(1.35rem, 1.9vw, 1.7rem)/1.15 var(--f-serif); margin: 0 0 .35rem; }
.sa-ev p { margin: 0; color: var(--c-muted); font-size: .95rem; line-height: 1.6; max-width: 36rem; }
.sa-ev__m { display: none; }
.sa__ph { position: sticky; top: calc(var(--nav-h) + 2rem); aspect-ratio: 4 / 5; }
.sa__ph figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s var(--ease-soft); }
.sa__ph figure.on { opacity: 1; }
.sa__ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.sa__ph figure[data-ph="storia-5"] img { filter: none; }
.rm .sa .rail i { transform: none; } .rm .sa-ev::before { background: var(--c-ink); } .rm .sa__ph figure { transition: none; }
@media (prefers-reduced-motion: reduce) { .sa .rail i { transform: none !important; } .sa__ph figure { transition: none; } }
@media (max-width: 860px) {
  .sa__grid { grid-template-columns: 1fr; } .sa__ph { display: none; }
  .sa-ev { grid-template-columns: 1fr; row-gap: .3rem; }
  .sa-ev__m { display: block; grid-row: 1; margin: 0 0 .8rem; }
  .sa-ev__m img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; filter: grayscale(1); }
}

/* ---- sostenibilità: la foto della famiglia al posto di tap-5 ---- */
.n-sust__ph--fam { grid-column: 1 / 7; }
.n-sust__ph--fam img { aspect-ratio: 1173 / 800; height: auto; }
.n-sust__fam { grid-column: 7 / 13; align-self: end; font: 300 clamp(1.4rem, 2.2vw, 2rem)/1.3 var(--f-serif); margin: 0; }
.n-sust .n-sust__txt { grid-column: 1 / 13; }
@media (max-width: 860px) { .n-sust__ph--fam { display: block; grid-column: 1 / -1; } .n-sust__fam { grid-column: 1 / -1; } }

/* ---- M-10i: foto di Fabio a colori come storia-5; riga sulla famiglia senza foto ---- */
.sa__ph figure[data-ph="fabio"] img { filter: none; object-position: 50% 30%; }
.sa-ev[data-ph="fabio"] .sa-ev__m img { filter: none; aspect-ratio: 4 / 3; object-position: 35% 72%; }
.n-sust__fam--solo { grid-column: 1 / -1; align-self: start; max-width: 44rem; }