/* =========================================================
   work.css — 02 SELECTED WORK · 03 ABOUT · 04 CONTACT

   Dopo la Hero il design si fa da parte: griglia precisa,
   niente card, niente bordi, niente ombre. Solo video,
   testo piccolo e spazio.

   Tutte le sezioni usano .section (container unico in
   base.css): stesso bordo sinistro e destro per tutta la
   pagina. Nessun elemento esce dal container.
   ========================================================= */

.section__title {
  font-size: clamp(26px, 3.2vw, 54px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
}

.section__label {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  color: var(--muted);
}

/* =========================================================
   SELECTED WORK — griglia a tre colonne

   I video sono verticali 9:16 (sono reel): il rapporto è
   quello del lavoro, non uno 16:9 forzato che ritaglierebbe
   via mezza inquadratura.

   minmax(0, 1fr) e min-width: 0 sono la ragione per cui
   niente può spingere la griglia fuori dal container:
   senza quello 0, una colonna cresce fino alla dimensione
   del suo contenuto.
   ========================================================= */

.work-grid {
  margin-top: clamp(40px, 6vh, 88px);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  align-items: start;             /* tutte le informazioni partono alla stessa altezza */
}

.project {
  min-width: 0;
  width: 100%;
}

.project__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;           /* stessa linea sopra e stessa linea sotto per tutti */
  overflow: hidden;               /* serve solo a ritagliare il video, niente altro */
  background: var(--bg-secondary);
}

.project__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.1s var(--ease);
}

/* l'unica microinterazione: un respiro dell'immagine */
.project:hover .project__video { transform: scale(1.015); }

/* =========================================================
   ABOUT — testo a sinistra, il ciak che batte a destra.
   Due colonne dentro lo stesso container di tutto il resto.
   ========================================================= */

.about__grid {
  margin-top: clamp(28px, 4vh, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.about__text {
  max-width: 30ch;
  font-size: clamp(19px, 2.05vw, 32px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.025em;
  color: var(--text);
  text-wrap: pretty;
}

.about__text p + p { margin-top: .7em; }
.about__text strong { font-weight: 600; }

/* il ciak: sta fermo, e ogni tanto batte una volta.
   Per cambiare il ritmo: la durata dell'animazione qui sotto. */
.about__clap {
  justify-self: center;
  font-size: clamp(96px, 13vw, 210px);
  line-height: 1;
  filter: grayscale(.1);
  transform-origin: 22% 78%;
  animation: clap 5s ease-in-out infinite;
}

@keyframes clap {
  0%, 60%, 100% { transform: rotate(0deg) scale(1); }
  64%           { transform: rotate(-14deg) scale(1.05); }
  69%           { transform: rotate(3deg) scale(.985); }
  74%           { transform: rotate(-4.5deg) scale(1.01); }
  79%           { transform: rotate(0deg) scale(1); }
}

/* =========================================================
   CONTACT — la chiusura tipografica
   La misura è in vw ma il testo resta dentro il container:
   "together." è la riga più larga e a 9vw occupa circa il
   45% della larghezza disponibile. Verificato da 320 a 2560.
   ========================================================= */

.contact__cta {
  font-size: clamp(40px, 9vw, 150px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.05em;
  overflow-wrap: break-word;
}

.contact__accent { color: var(--yellow); }   /* una sola parola gialla */

.contact__note {
  margin-top: clamp(22px, 3vh, 38px);
  max-width: 44ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: #A8A8A1;
}

.contact__links {
  margin-top: clamp(36px, 5vh, 68px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 72px);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 500;
}

/* l'indirizzo si vede per intero: se il computer non ha un programma
   di posta configurato, il clic sembra non fare niente — così almeno
   si può copiare a mano */
.contact__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.contact__links a {
  color: var(--text);
  border-bottom: 1px solid rgba(242, 241, 236, .22);
  padding-bottom: 2px;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.contact__links a:hover,
.contact__links a:focus-visible { color: var(--yellow); border-color: var(--yellow); }

/* =========================================================
   FOOTER — stessi margini di tutto il resto
   ========================================================= */

.footer {
  margin-top: clamp(90px, 14vh, 170px);
  font-size: 13px;
  color: var(--dim);
}