/* Home "La Notte": copertina scura NVI, logo che si compone, contesto su avorio, colophon. */

/* Prima vista: la copertina */
.notte { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: var(--nero); color: var(--avorio);
         overflow: hidden; }
.notte__top { display: flex; justify-content: flex-end; align-items: center; padding: 24px clamp(20px, 4vw, 48px); }
.notte__top a { color: var(--avorio); text-decoration: none; display: inline-flex; gap: 12px; align-items: center; opacity: .82;
                transition: opacity .2s var(--ease); }
.notte__top a:hover { opacity: 1; }
.notte__top a::before { content: ""; width: 28px; border-top: 1px solid currentColor; }

.notte__center { display: grid; place-items: center; align-content: center; gap: clamp(28px, 5vh, 56px); padding: 0 20px; text-align: center; }
.mark { position: relative; width: min(520px, 78vw); aspect-ratio: 2 / 1; }
.mark img { position: absolute; inset: 0; width: 100%; height: 100%; animation: rise-mark 2.2s cubic-bezier(.16, 1, .3, 1) .25s both; }
/* Il marchio resta sempre intero (brand.md: non scomporlo): una sola maschera lo scopre dal basso, come una pianta che cresce. */
@keyframes rise-mark {
  from { clip-path: inset(100% 0 0 0); filter: blur(6px); }
  70% { filter: blur(0); }
  to { clip-path: inset(0 0 0 0); filter: blur(0); }
}
@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.notte__line { margin: 0; font: 400 clamp(2rem, 4.6vw, 4.25rem)/1.06 var(--serif); letter-spacing: -.015em; max-width: 17ch;
               text-wrap: balance; animation: settle .9s var(--ease) 2s both; }
.notte__line em { font-style: normal; color: var(--salvia); }
.notte__cta { animation: settle .9s var(--ease) 2.4s both; }
.notte .btn { background: var(--avorio); border-color: var(--avorio); color: var(--nero); }
.notte .btn:hover { background: transparent; color: var(--avorio); }
.notte__foot { display: flex; justify-content: center; padding: 28px 20px 30px; color: rgba(255, 253, 250, .55); }
.notte__foot span { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.notte__foot span::after { content: ""; height: 34px; border-left: 1px solid currentColor; animation: drip 1.4s var(--ease) 3s both; transform-origin: top; }
@keyframes drip { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Contesto */
.contesto { width: min(1160px, 100%); margin: 0 auto; padding: clamp(72px, 12vh, 140px) clamp(20px, 4vw, 40px);
            display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.contesto h2 { font: 400 clamp(2.2rem, 4.4vw, 3.9rem)/1.04 var(--serif); letter-spacing: -.02em; margin: 0 0 32px; text-wrap: balance; }
.contesto p { margin: 0 0 18px; max-width: 58ch; }
.contesto p.soft { color: var(--fg-soft); }
.contesto figure { margin: 0; }
.contesto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Fascia: la citazione su immagine con velo verde */
.fascia { position: relative; min-height: 78svh; display: grid; align-items: end; color: var(--avorio); isolation: isolate; overflow: hidden; }
.fascia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; }
.fascia::before { content: ""; position: absolute; inset: 0; z-index: -1;
                  background: linear-gradient(180deg, rgba(34, 48, 42, .15) 0%, rgba(34, 48, 42, .55) 45%, rgba(34, 48, 42, .92) 100%); }
.fascia blockquote { margin: 0; padding: 0 clamp(20px, 6vw, 96px) clamp(48px, 10vh, 112px); max-width: 1160px; }
.fascia blockquote p { font: 400 clamp(1.9rem, 4vw, 3.6rem)/1.08 var(--serif); letter-spacing: -.015em; margin: 0; max-width: 20ch; text-wrap: balance; }

/* Colophon */
.colophon { width: min(1160px, 100%); margin: 0 auto; padding: clamp(64px, 10vh, 112px) clamp(20px, 4vw, 40px) 48px;
            display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); }
.colophon h2 { color: var(--accent); margin: 0 0 18px; display: flex; gap: 16px; align-items: center; }
.colophon h2::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.colophon__legal p { margin: 0 0 14px; font-size: .9rem; color: var(--fg-soft); max-width: 62ch; }
.colophon__enter { align-self: start; background: var(--verde); color: var(--avorio); padding: clamp(28px, 4vw, 48px); }
.colophon__enter .btn { background: var(--avorio); border-color: var(--avorio); color: var(--verde-inchiostro); }
.colophon__enter .btn:hover { background: transparent; color: var(--avorio); }
.colophon__enter p { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.15 var(--serif); margin: 0 0 24px; }
.colophon__firm { width: min(1160px, 100%); margin: 0 auto; padding: 22px clamp(20px, 4vw, 40px) 40px; border-top: 1px solid var(--rule);
                  color: var(--fg-soft); font-size: .78rem; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }

@media (max-width: 820px) {
  .contesto, .colophon { grid-template-columns: 1fr; }
  .contesto img { aspect-ratio: 4 / 3; }
  .fascia { min-height: 64svh; }
}
@media (prefers-reduced-motion: reduce) {
  .mark img { clip-path: none; filter: none; }
}
.colophon__enter p.colophon__ask { font: 400 .85rem/1.5 var(--sans); margin: 22px 0 0; color: var(--salvia); }
.colophon__ask a { color: var(--avorio); }