/* =============================================================
   Parea Sons — reset e fondamenta
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Arrivando da un collegamento con ancora, il bersaglio si ferma sotto
   l'header fisso invece di finirci dietro. Allo scroll l'header è nello
   stato ridotto, quindi il riferimento è quell'altezza. */
[id] { scroll-margin-top: calc(var(--header-h-ridotto) + var(--s-24)); }

body {
  margin: 0;
  background-color: var(--tortora-chiaro);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: var(--t-20);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* La trama del lino: due serie di righe a 3px, quasi invisibili.
   Dà una superficie al fondo, che altrimenti resta una campitura piatta. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(26, 29, 36, .014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,
      rgba(26, 29, 36, .014) 0 1px, transparent 1px 3px);
}

/* `max-width` da solo non basta, e il giorno che è mancato si è visto.
   Gli `<img>` del sito portano `width` e `height` veri: quando la
   larghezza la taglia il `max-width` e l'altezza resta quella
   dell'attributo, la fotografia non si rimpicciolisce — si SCHIACCIA.
   Con `height: auto` la proporzione la tengono gli attributi, che è
   anche quello che tiene ferma la pagina mentre gli scatti arrivano.

   Non è teoria: il 12 agosto 2026 un caricamento di maison.html ha
   perso `css/collezione.css` (ricambio del server sulla porta), e la
   fotografia del telaio — 1200×801, senza più il suo `.posto` che la
   ritaglia — è uscita a 928×801, deformata del 23%, a coprire tutta
   la pagina. Con questa riga sarebbe stata una fotografia larga e
   giusta, con sotto la pagina che si legge: la stessa regola dei
   ripieghi del sito, quello che non arriva non deve portarsi via il
   resto.

   Le lastre che vogliono `height: 100%` la chiedono con una classe
   (`.posto img`, `.articolo__scatto`, `.palco__vista img`), che è più
   specifica e vince. */
img, svg { display: block; max-width: 100%; }
img { height: auto; }

/* Senza questo, un display esplicito (grid, flex) prevale sull'attributo
   hidden e l'elemento resta visibile. */
[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* --- Stato di messa a fuoco -----------------------------------
   Visibile ovunque, mai rimosso: è l'unico modo di orientarsi
   navigando da tastiera.                                        */
:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

/* --- Utilità ------------------------------------------------- */
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salta {
  position: absolute;
  left: var(--bordo-pagina);
  top: 0;
  z-index: 500;
  transform: translateY(-120%);
  background: var(--bianco-lino);
  border: 1px solid var(--inchiostro);
  padding: var(--s-8) var(--s-16);
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  transition: transform var(--t-rapido) var(--ease);
}
.salta:focus { transform: translateY(var(--s-8)); }

/* --- Occhiello: etichetta breve sopra un titolo ---------------
   In rosso. È la riga che dice di cosa si parla, ed è il punto in
   cui il colore dello stemma entra nella pagina scritta invece di
   restare confinato nel marchio. Sul fondo pagina dà 6,5:1, sul
   bianco lino 7,1: si legge, non solo si vede.                    */
.occhiello {
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: 400;
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--rosso);
}

/* --- Filetto orizzontale ------------------------------------- */
.filetto {
  display: block;
  width: var(--s-64);
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--filetto-forte);
}

}

/* Dove la collezione non c'è ancora non si mette un bottone: non si
   promette una pagina che non esiste. Al suo posto, questo. */
.attesa {
  width: 100%;
  padding-top: var(--s-24);
  border-top: 1px solid var(--filetto);
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--greige);
}

/* --- Destinatari ---------------------------------------------
   La sostanza B2B delle brochure: chi indossa la collezione e per
   quale occasione. Nome a sinistra, cosa riceve a destra. Lo usano
   la sezione dei mondi in home e le tre pagine di collezione.     */
.destinatari {
  display: grid;
  gap: var(--s-16);
  width: 100%;
  padding-top: var(--s-24);
  border-top: 1px solid var(--filetto);
}

.destinatario {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--s-16);
  align-items: baseline;
}

.destinatario dt {
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
}

.destinatario dd {
  margin: 0;
  font-size: var(--t-20);
  line-height: 1.4;
  color: var(--greige);
}

@media (max-width: 768px) {
  .destinatario { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
}

/* --- Movimento ridotto ---------------------------------------
   Chi ha chiesto meno movimento riceve solo dissolvenze,
   nessuna traslazione e nessuno scorrimento animato.            */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    /* Restano solo le transizioni di colore e opacità: gli spostamenti
       e i cambi di dimensione avvengono di scatto, senza movimento. */
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: var(--t-rapido) !important;
    scroll-behavior: auto !important;
  }
}