/* ─────────────────────────────────────────────────────────────
   ui.css — componenti aggiunti: journal, newsletter, cookie,
   pagine legali, condivisione, switch lingua.
   Stessa grammatica visiva della home: nessun raggio di bordo,
   linee da 1px, micro-etichette 9-11px con spaziatura 0.15em,
   titoli PPNueMontreal 500, palette #eeeeef / #0b1d3d.
   ───────────────────────────────────────────────────────────── */

/* ─── UTILITÀ ─── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.micro-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
  font-weight: 400;
}

.section-title {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--navy);
}

a { color: inherit; }

/* ─── SEZIONE JOURNAL (home) ─── */
.journal-section {
  background: var(--bg-light);
  padding: 96px 28px 88px;
  border-top: 1px solid rgba(11, 29, 61, 0.12);
  position: relative;
}

@media (min-width: 768px) {
  .journal-section { padding: 128px 48px 112px; }
}

.journal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.journal-eyebrow {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
}

.journal-headline {
  margin-top: 18px;
  max-width: 620px;
}

.journal-intro {
  margin-top: 18px;
  max-width: 520px;
  font-size: clamp(13px, 2.2vw, 15px);
  line-height: 1.65;
  color: rgba(11, 29, 61, 0.72);
}

.journal-all {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  white-space: nowrap;
  border-bottom: 1px solid rgba(11, 29, 61, 0.3);
  padding-bottom: 3px;
  transition: border-color .25s ease, opacity .25s ease;
}
.journal-all:hover { border-color: var(--navy); opacity: .65; }


/* Binario orizzontale trascinabile */
.journal-rail-wrap { position: relative; }

.journal-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  cursor: none;
}
.journal-rail::-webkit-scrollbar { display: none; }
.journal-rail.is-dragging { scroll-snap-type: none; }
.journal-rail.is-dragging .j-card { pointer-events: none; }

@media (min-width: 640px)  { .journal-rail { grid-auto-columns: 46%; } }
@media (min-width: 1024px) { .journal-rail { grid-auto-columns: 30%; } }
@media (min-width: 1500px) { .journal-rail { grid-auto-columns: 23%; } }

.j-card {
  scroll-snap-align: start;
  min-width: 0;
}

.j-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--navy);
}

.j-card-img {
  position: relative;
  aspect-ratio: 1 / 1.18;
  overflow: hidden;
  background: #e4e4e6;
}

.j-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.j-card a:hover .j-card-img img { transform: scale(1.045); }

.j-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.5);
}
.j-card-meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(11, 29, 61, 0.35);
  flex: 0 0 auto;
}

.j-title {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 10px;
}

.j-excerpt {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(11, 29, 61, 0.62);
  margin-bottom: 16px;
}

.j-more {
  margin-top: auto;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.j-more::after {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width .3s ease;
}
.j-card a:hover .j-more::after { width: 30px; }

/* Comandi del binario */
.rail-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.rail-track {
  flex: 1;
  height: 1px;
  background: rgba(11, 29, 61, 0.15);
  position: relative;
  overflow: hidden;
}
.rail-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 20%;
  background: var(--navy);
  transition: left .18s ease, width .18s ease;
}

.rail-btn {
  width: 30px; height: 30px;
  border: 1px solid rgba(11, 29, 61, 0.25);
  background: none;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
  padding: 0;
}
.rail-btn:hover { background: var(--navy); color: var(--bg-light); border-color: var(--navy); }
.rail-btn[disabled] { opacity: .25; }
.rail-btn svg { width: 11px; height: 11px; display: block; }

@media (hover: none) { .rail-btn { display: none; } }

/* Card che entra in scena */
.j-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.j-card.is-in { opacity: 1; transform: none; }
.j-card.is-hidden { display: none; }

/* ─── GRIGLIA JOURNAL (pagina indice) ─── */
.journal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px 5px;
}
@media (min-width: 700px)  { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }

.journal-page {
  padding: 0 28px 96px;
  background: var(--bg-light);
}
@media (min-width: 768px) { .journal-page { padding: 0 48px 120px; } }

.page-hero {
  padding: 140px 0 56px;
  border-bottom: 1px solid rgba(11, 29, 61, 0.12);
  margin-bottom: 44px;
}
@media (min-width: 768px) { .page-hero { padding: 180px 0 64px; } }

.page-hero .page-title {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(38px, 8vw, 74px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--navy);
  margin: 16px 0 22px;
}

.page-hero .page-sub {
  max-width: 560px;
  font-size: clamp(13px, 2.2vw, 16px);
  line-height: 1.65;
  color: rgba(11, 29, 61, 0.7);
}

/* Barra di ricerca del journal */
/* ─────────────────────────────────────────────────────────────
   I DUE DISEGNI D'ARTICOLO CHE NON SONO LA COPERTINA

   Il video e la gallery. Il terzo — la copertina fissa — è quello di
   sempre e sta più su, dove è sempre stato.
   ───────────────────────────────────────────────────────────── */

/* Il riquadro d'attesa del video: la tua fotografia, e sopra un
   pulsante. L'iframe non c'è finché non si preme. */
.video-attesa {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  line-height: 0;
}
.video-attesa picture,
.video-attesa img { display: block; width: 100%; height: auto; }
.video-attesa::after {
  /* Una velatura blu sotto il pulsante: su una fotografia chiara il
     testo bianco sparirebbe. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,29,61,.10), rgba(11,29,61,.42));
  transition: opacity var(--dur-m) var(--ease-soft);
  pointer-events: none;
}
.video-attesa:hover::after { opacity: .72; }

.video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  color: var(--bg-light);
  font: inherit;
  cursor: pointer;
  line-height: 1;
}
@media (hover: hover) { .video-play { cursor: none; } }

/* Il triangolo è fatto di bordi: nessun file, nessun font, nessuna
   icona da caricare per una freccia. */
.video-tri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--bg-light);
  margin-left: 5px;   /* un triangolo è otticamente storto: si compensa */
  transition: transform var(--dur-m) var(--ease-ink);
}
.video-play:hover .video-tri,
.video-play:focus-visible .video-tri { transform: scale(1.12); }

.video-eti {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.video-vero { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-attesa.is-acceso { background: #000; }
.video-attesa.is-acceso::after { display: none; }

/* La gallery. Una colonna sola: sono fotografie, e una fotografia
   larga quanto il testo è una fotografia che si guarda. Lo stacco è
   quello della griglia della home. */
.post-galleria {
  max-width: 1080px;
  margin: 0 auto 56px;
  padding: 0 28px;
  display: grid;
  gap: 5px;
}
.post-galleria figure { margin: 0; line-height: 0; }
.post-galleria img { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  /* Da qui in su stanno a due a due, come la galleria della home. */
  .post-galleria { grid-template-columns: 1fr 1fr; padding: 0 48px; }
  /* La prima resta larga tutta: è la copertina, anche se è in gallery. */
  .post-galleria figure:first-child { grid-column: 1 / -1; }
}

/* Paginazione */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 72px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.pagination a, .pagination span {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color .25s ease, opacity .25s ease;
}
.pagination a:hover { border-bottom-color: var(--navy); }
.pagination .is-current { border-bottom-color: var(--navy); }
.pagination .is-muted { opacity: .3; }

/* ─── ARTICOLO ─── */
.post-page { background: var(--bg-light); }

.post-hero {
  padding: 132px 28px 0;
  max-width: 820px;
  margin: 0 auto;
}
@media (min-width: 768px) { .post-hero { padding-top: 176px; } }

.post-breadcrumb {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.5);
  margin-bottom: 26px;
}
.post-breadcrumb a { text-decoration: none; color: inherit; }
.post-breadcrumb a:hover { color: var(--navy); }
.post-breadcrumb .sep { margin: 0 8px; opacity: .5; }

.post-title {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 5.6vw, 54px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--navy);
  margin-bottom: 24px;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(11, 29, 61, 0.12);
}
.post-meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(11, 29, 61, 0.35);
}

.post-cover {
  margin: 0 auto 56px;
  max-width: 1080px;
  padding: 44px 5px 0;
}
.post-cover figure { margin: 0; }
.post-cover picture { display: block; }
/* La copertina si mostra nelle sue proporzioni vere.
   Prima era forzata a 16/9 con `object-fit: cover`: su una fotografia
   verticale — «Wasted Heart» è 1080×1920 — voleva dire ritagliarne via
   quasi due terzi. Su un sito di fotografia è il difetto peggiore che
   ci possa essere.

   Le due regole servono tutte e due: `max-width` tiene a bada le
   orizzontali, `max-height` le verticali, che altrimenti sarebbero alte
   il doppio dello schermo. */
.post-cover img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
  margin: 0 auto;
  display: block;
  aspect-ratio: auto;
  object-fit: contain;
}
.j-card-img picture { display: block; width: 100%; height: 100%; }
.post-cover figcaption {
  margin-top: 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.45);
  text-align: center;
}

/* Corpo dell'articolo */
.post-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 28px 80px;
  font-size: clamp(15px, 2.3vw, 17px);
  line-height: 1.75;
  color: rgba(11, 29, 61, 0.87);
}

.post-body > p:first-of-type {
  font-size: clamp(17px, 2.6vw, 20px);
  line-height: 1.6;
  color: var(--navy);
  margin-bottom: 30px;
}

.post-body p { margin-bottom: 22px; }

.post-body h2 {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(21px, 3.4vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--navy);
  margin: 54px 0 18px;
  scroll-margin-top: 100px;
}

.post-body h3 {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 2.5vw, 19px);
  color: var(--navy);
  margin: 36px 0 12px;
  scroll-margin-top: 100px;
}

.post-body h4 {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
  margin: 32px 0 10px;
}

.post-body ul, .post-body ol { margin: 0 0 24px 20px; }
.post-body li { margin-bottom: 9px; }

.post-body blockquote {
  margin: 40px 0;
  padding-left: 22px;
  border-left: 1px solid rgba(11, 29, 61, 0.3);
}
.post-body blockquote p {
  font-size: clamp(17px, 2.7vw, 21px);
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: 0;
}

.post-body a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 29, 61, 0.35);
  transition: border-color .2s ease;
}
.post-body a:hover { border-bottom-color: var(--navy); }

.post-body img {
  width: 100%;
  height: auto;
  display: block;
  margin: 40px 0;
}

.post-body hr {
  border: none;
  border-top: 1px solid rgba(11, 29, 61, 0.15);
  margin: 48px 0;
}

.post-body strong { font-weight: 500; }

.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: rgba(11, 29, 61, 0.06);
  padding: 2px 5px;
}

/* Indice dell'articolo */
.post-toc {
  max-width: 680px;
  margin: 0 auto 44px;
  padding: 24px 28px;
  border-top: 1px solid rgba(11, 29, 61, 0.12);
  border-bottom: 1px solid rgba(11, 29, 61, 0.12);
}
.post-toc .micro-label { margin-bottom: 12px; display: block; }
.post-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.post-toc li { margin-bottom: 7px; counter-increment: toc; }
.post-toc a {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(11, 29, 61, 0.7);
  text-decoration: none;
  transition: color .2s ease;
}
.post-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(11, 29, 61, 0.35);
  margin-right: 10px;
}
.post-toc a:hover { color: var(--navy); }

/* Condivisione */
.share-bar {
  max-width: 680px;
  margin: 0 auto;
  padding: 30px 28px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(11, 29, 61, 0.12);
}
.share-bar .micro-label { margin-right: 4px; }

.share-btn {
  background: none;
  border: 1px solid rgba(11, 29, 61, 0.2);
  color: var(--navy);
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  padding: 0;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.share-btn:hover { background: var(--navy); color: var(--bg-light); border-color: var(--navy); }
.share-btn svg { width: 14px; height: 14px; display: block; fill: currentColor; }

.share-feedback {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
  opacity: 0;
  transition: opacity .25s ease;
}
.share-feedback.is-visible { opacity: 1; }

/* Tag */
.post-tags {
  max-width: 680px;
  margin: 34px auto 0;
  padding: 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Etichette, non collegamenti: sono <span>. Niente stato di passaggio e
   niente transizione — una cosa che si illumina sotto il puntatore
   promette un clic che non c'è, ed è peggio di una che sta ferma.
   Il cursore resta quello personalizzato del sito, che sopra una zona
   non cliccabile è già il pallino piccolo. */
.post-tag {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.6);
  border: 1px solid rgba(11, 29, 61, 0.18);
  padding: 6px 11px;
  /* Un <span> non ha una linea da togliere, ma la riga resta: se un
     giorno tornasse un <a>, tornerebbe senza sottolineatura. */
  text-decoration: none;
}

/* Firma autore */
.post-author {
  max-width: 680px;
  margin: 60px auto 0;
  padding: 30px 28px;
  border-top: 1px solid rgba(11, 29, 61, 0.12);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.post-author img {
  width: 62px; height: 62px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #e4e4e6;
}
.post-author .pa-name {
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 6px;
}
.post-author .pa-bio {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(11, 29, 61, 0.65);
}

/* Articoli correlati */
.related {
  padding: 88px 28px 0;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 768px) { .related { padding: 112px 48px 0; } }
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 5px;
  margin-top: 34px;
}
@media (min-width: 700px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

/* ─── NEWSLETTER ─── */
.newsletter {
  background: var(--navy);
  color: var(--text-light);
  padding: 80px 28px;
  margin-top: 96px;
}
@media (min-width: 768px) { .newsletter { padding: 104px 48px; } }

.newsletter-inner {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 34px;
}
@media (min-width: 900px) {
  .newsletter-inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
}

.newsletter .nl-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(238, 238, 239, 0.5);
  margin-bottom: 18px;
}

.newsletter .nl-title {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 3.6vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-light);
}

.newsletter .nl-text {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(238, 238, 239, 0.65);
  margin-top: 18px;
  max-width: 420px;
}

.nl-form { display: flex; flex-direction: column; gap: 0; }

.nl-field {
  border-bottom: 1px solid rgba(238, 238, 239, 0.25);
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nl-field input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-light);
  font-family: 'PPNueMontreal', sans-serif;
  font-size: 15px;
  cursor: none;
  caret-color: transparent;
  min-width: 0;
}
.nl-field input:focus { caret-color: currentColor; }
.nl-field input::placeholder { color: rgba(238, 238, 239, 0.35); }

.nl-submit {
  background: none;
  border: none;
  color: var(--text-light);
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: none;
  padding: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity .25s ease;
}
.nl-submit::after {
  content: "";
  width: 20px; height: 1px;
  background: currentColor;
  transition: width .3s ease;
}
.nl-submit:hover::after { width: 32px; }
.nl-submit[disabled] { opacity: .45; }

.nl-note {
  margin-top: 18px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 238, 239, 0.4);
  line-height: 1.7;
}
.nl-note a { color: rgba(238, 238, 239, 0.7); text-decoration: none; border-bottom: 1px solid rgba(238,238,239,0.3); }

.nl-msg {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(238, 238, 239, 0.9);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .35s ease, margin-top .35s ease;
}
.nl-msg.is-visible { max-height: 80px; opacity: 1; }

/* Campo trappola per i bot */
.nl-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

/* Variante chiara della newsletter, per le pagine su fondo #eeeeef */
.newsletter.is-light {
  background: var(--bg-light);
  color: var(--navy);
  border-top: 1px solid rgba(11, 29, 61, 0.12);
}
.newsletter.is-light .nl-label  { color: rgba(11, 29, 61, 0.5); }
.newsletter.is-light .nl-title  { color: var(--navy); }
.newsletter.is-light .nl-text   { color: rgba(11, 29, 61, 0.68); }
.newsletter.is-light .nl-field  { border-bottom-color: rgba(11, 29, 61, 0.25); }
.newsletter.is-light .nl-field input { color: var(--navy); }
.newsletter.is-light .nl-field input::placeholder { color: rgba(11, 29, 61, 0.35); }
.newsletter.is-light .nl-submit { color: var(--navy); }
.newsletter.is-light .nl-note   { color: rgba(11, 29, 61, 0.45); }
.newsletter.is-light .nl-note a { color: rgba(11, 29, 61, 0.7); border-bottom-color: rgba(11,29,61,0.3); }
.newsletter.is-light .nl-msg    { color: var(--navy); }

/* ─── SWITCH LINGUA (bio) ─── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto 30px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}
.lang-switch button {
  background: none;
  border: none;
  padding: 0 0 3px;
  font-family: 'PPNueMontreal', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 238, 239, 0.4);
  cursor: none;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.lang-switch button:hover { color: rgba(238, 238, 239, 0.75); }
.lang-switch button.is-active {
  color: var(--text-light);
  border-bottom-color: rgba(238, 238, 239, 0.6);
}
.lang-switch .sep {
  width: 1px; height: 9px;
  background: rgba(238, 238, 239, 0.25);
}

/* Il testo bio cambia lingua con una dissolvenza breve */
.about-text.is-swapping { opacity: 0; transition: opacity .18s ease; }
.about-text { transition: opacity .28s ease; }

/* ─── COOKIE ─── */
.cookie-bar {
  position: fixed;
  left: 18px;
  bottom: 18px;
  right: 18px;
  z-index: 4000;
  background: var(--navy);
  color: var(--text-light);
  padding: 26px 24px 22px;
  max-width: 430px;
  box-shadow: 0 18px 60px rgba(11, 29, 61, 0.28);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
  font-family: 'PPNueMontreal', sans-serif;
}
.cookie-bar.is-open { opacity: 1; transform: none; pointer-events: auto; }

@media (min-width: 560px) { .cookie-bar { right: auto; width: 430px; } }

.cookie-bar .ck-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 238, 239, 0.5);
  margin-bottom: 14px;
}
.cookie-bar .ck-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(238, 238, 239, 0.78);
  margin-bottom: 22px;
}
.cookie-bar .ck-text a {
  color: var(--text-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 238, 239, 0.35);
}

.ck-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.ck-btn {
  background: none;
  border: none;
  font-family: 'PPNueMontreal', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: none;
  padding: 0;
  transition: opacity .25s ease;
}
.ck-btn:hover { opacity: .7; }

.ck-btn.primary {
  color: var(--navy);
  background: var(--bg-light);
  padding: 11px 18px;
  font-weight: 500;
}
.ck-btn.ghost  { color: rgba(238, 238, 239, 0.8); border-bottom: 1px solid rgba(238,238,239,0.3); padding-bottom: 3px; }
.ck-btn.quiet  { color: rgba(238, 238, 239, 0.5); }

/* Pannello preferenze */
.ck-prefs { display: none; }
.cookie-bar.is-prefs .ck-intro { display: none; }
.cookie-bar.is-prefs .ck-prefs { display: block; }

.ck-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(238, 238, 239, 0.14);
}
.ck-row:first-of-type { border-top: 1px solid rgba(238, 238, 239, 0.14); }
.ck-row .ck-name {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}
.ck-row .ck-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(238, 238, 239, 0.55);
}
.ck-row .ck-fixed {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 238, 239, 0.4);
  white-space: nowrap;
  padding-top: 3px;
}

/* Interruttore minimale */
.ck-toggle {
  position: relative;
  width: 34px; height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  cursor: none;
}
.ck-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: none;
}
.ck-toggle .track {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(238, 238, 239, 0.35);
  transition: background .3s ease, border-color .3s ease;
  pointer-events: none;
}
.ck-toggle .knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 10px; height: 10px;
  background: rgba(238, 238, 239, 0.6);
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s ease;
  pointer-events: none;
}
.ck-toggle input:checked ~ .track { background: rgba(238, 238, 239, 0.14); border-color: rgba(238,238,239,0.7); }
.ck-toggle input:checked ~ .knob  { transform: translateX(18px); background: var(--bg-light); }
.ck-toggle input:focus-visible ~ .track { outline: 1px solid var(--bg-light); outline-offset: 2px; }

/* Link "gestisci cookie" nel footer */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 12px;
}
.footer-legal a, .footer-legal button {
  font-family: 'PPNueMontreal', sans-serif;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: none;
  transition: color .25s ease;
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--navy); }
.footer-legal .sep { color: rgba(11, 29, 61, 0.25); font-size: 9px; }

@media (max-width: 767px) {
  .footer-copy { text-align: center; }
  .footer-legal { justify-content: center; }
}

/* ─── PAGINE LEGALI ─── */
.legal-page {
  background: var(--bg-light);
  padding: 132px 28px 96px;
}
@media (min-width: 768px) { .legal-page { padding: 176px 48px 120px; } }

.legal-inner { max-width: 720px; margin: 0 auto; }

.legal-inner h1 {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 5.4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--navy);
  margin: 14px 0 18px;
}
.legal-updated {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.45);
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(11, 29, 61, 0.12);
  margin-bottom: 40px;
}
.legal-inner h2 {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 3vw, 23px);
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 48px 0 14px;
  scroll-margin-top: 100px;
}
.legal-inner h3 {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
  margin: 30px 0 10px;
}
.legal-inner p, .legal-inner li {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(11, 29, 61, 0.82);
}
.legal-inner p  { margin-bottom: 18px; }
.legal-inner ul, .legal-inner ol { margin: 0 0 20px 20px; }
.legal-inner li { margin-bottom: 8px; }
.legal-inner a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 29, 61, 0.3);
}
.legal-inner strong { font-weight: 500; }

/* La tabella delle pagine legali e quella degli articoli sono la stessa
   tabella. Il selettore è doppio e le misure sono scritte una volta sola:
   duplicarle voleva dire due tabelle che si somigliano finché qualcuno non
   tocca un padding, e da quel giorno non si somigliano più. L'occhiello in
   maiuscoletto è lo stesso segno dei numeri d'ordine del menu e del journal.
   `-wrap` serve sul telefono: una tabella a tre colonne non entra in 360 px,
   e senza scorrimento proprio è la PAGINA a scorrere di lato. */
.legal-table,
.post-body .post-table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 28px;
  font-size: 12.5px;
}
.legal-table th, .legal-table td,
.post-body .post-table th, .post-body .post-table td {
  text-align: left;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid rgba(11, 29, 61, 0.12);
  vertical-align: top;
  line-height: 1.55;
}
.legal-table th,
.post-body .post-table th {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.5);
  font-weight: 400;
}
.legal-table-wrap,
.post-body .post-table-wrap { overflow-x: auto; }
/* La prima colonna è quella che si legge per orientarsi: non deve andare
   a capo su due righe mentre le altre hanno spazio in abbondanza. */
.post-body .post-table td:first-child { padding-right: 20px; }

/* ─── PAGINA DI SERVIZIO (conferma newsletter, 404) ─── */
.notice-page {
  min-height: 78vh;
  background: var(--bg-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 28px 100px;
}
.notice-page .notice-title {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 16px 0 18px;
  max-width: 620px;
}
.notice-page .notice-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(11, 29, 61, 0.68);
  max-width: 460px;
  margin-bottom: 34px;
}
.notice-cta {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 29, 61, 0.3);
  padding-bottom: 4px;
  transition: border-color .25s ease;
}
.notice-cta:hover { border-bottom-color: var(--navy); }

/* ─── HEADER MINIMALE (pagine interne) ─── */
.mini-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  padding: 22px 28px;
  pointer-events: none;
}
@media (min-width: 768px) { .mini-header { padding: 26px 48px; } }
.mini-header a {
  pointer-events: auto;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  transition: opacity .25s ease;
}
.mini-header a:hover { opacity: .6; }

/* ─── ACCESSIBILITÀ: chi preferisce meno movimento ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .j-card { opacity: 1; transform: none; }
}

/* Su dispositivi touch il cursore custom non c'è: ripristina il puntatore */
@media (hover: none) {
  .rail-btn, .ck-btn, .ck-toggle, .ck-toggle input,
  .nl-submit, .nl-field input,
  .share-btn, .footer-legal button, .lang-switch button, .journal-rail {
    cursor: pointer;
  }
  .nl-field input { cursor: text; caret-color: currentColor; }
}

/* Contenitore dello switch lingua nella bio */
.about-lang {
  display: flex;
  justify-content: center;
  padding: 34px 28px 0;
}
@media (max-width: 767px) {
  .about-lang { justify-content: flex-start; padding-left: 48px; }
}

/* Segnaposto da completare nelle pagine legali */
.legal-todo {
  background: rgba(11, 29, 61, 0.07);
  padding: 2px 6px;
  border-bottom: 1px dashed rgba(11, 29, 61, 0.4);
}

/* Blocchi di codice / modelli da copiare negli articoli */
.post-body pre {
  background: rgba(11, 29, 61, 0.05);
  border-left: 1px solid rgba(11, 29, 61, 0.2);
  padding: 20px 22px;
  margin: 32px 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
}
.post-body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ─────────────────────────────────────────────────────────────
   PAGINA ABOUT + RIMANDO DALLA HOME
   ───────────────────────────────────────────────────────────── */

/* Bottone minimale, usato in home e nella pagina About */
.btn-minimal {
  display: inline-block;
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid rgba(11, 29, 61, 0.35);
  padding: 14px 26px;
  cursor: none;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
/* Il colore non arriva tutto insieme: entra da sinistra, come
   l'inchiostro del resto del sito. Il bordo si scurisce prima, così
   qualcosa succede già nel primo decimo di secondo. */
.btn-minimal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .3s var(--ease-ink), border-color .25s var(--ease-soft),
              transform .25s var(--ease-ink);
}
.btn-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s var(--ease-ink);
}
.btn-minimal:hover {
  color: var(--bg-light);
  border-color: var(--navy);
  transform: translateY(-2px);
}
.btn-minimal:hover::before { transform: scaleX(1); }
/* Premuto: cede. È il segnale che manca a un bottone che si limita a
   cambiare colore — quello dice «sono acceso», questo dice «ti ho
   sentito». */
.btn-minimal:active {
  transform: translateY(1px) scale(.985);
  transition-duration: .08s;
}
.btn-minimal:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.btn-minimal.is-solid {
  background: var(--navy);
  color: var(--bg-light);
  border-color: var(--navy);
}
.btn-minimal.is-solid::before { background: var(--bg-light); }
.btn-minimal.is-solid:hover { color: var(--navy); }

@media (hover: none) { .btn-minimal { cursor: pointer; } }


/* ─────────────────────────────────────────────────────────────
   BOTTONE TONDO — l'etichetta corre sull'anello e gira

   Il rettangolo col bordo diceva «modulo da compilare»: è la forma di
   un bottone di sistema, e su un sito fatto di fotografie e di linee da
   1px stonava. Qui la cornice sparisce del tutto e resta un disco: la
   parola è scritta lungo la circonferenza e gira piano in senso orario,
   al centro un segno fermo indica dove si va. Il testo curvo lo compone
   btn_tondo() in lib/helpers.php, che gli cuce addosso il binario SVG.

   Misure: 132px di diametro sul computer, 112px sul telefono. Il testo
   sta su un cerchio di raggio 40 su un viewBox da 100, cioè all'80% del
   diametro: dentro quel bordo invisibile c'è il margine che tiene il
   disco staccato da quello che ha accanto.
   ───────────────────────────────────────────────────────────── */
.btn-tondo {
  --btn-tondo-d: 112px;

  position: relative;
  /* Griglia a una cella sola: anello e segno finiscono uno sopra
     l'altro senza bisogno di posizionarli in assoluto, e restano
     centrati da soli qualunque sia la misura del disco. */
  display: inline-grid;
  place-items: center;
  width: var(--btn-tondo-d);
  height: var(--btn-tondo-d);
  border-radius: 50%;
  /* Dentro un contenitore flex — .about-cta-actions ne è uno — il disco
     verrebbe schiacciato: il suo contenuto è un SVG largo il 100% e
     un'etichetta fuori dal flusso, cioè una larghezza minima di zero, e
     su schermo stretto i due bottoni si riducevano a un filo. Il cerchio
     non si comprime: manda a capo, semmai. */
  flex: none;

  /* Azzeramento degli stili del browser: la classe deve valere identica
     su un <a> e su un <button>, e il secondo arriva con font, bordo,
     fondo grigio e allineamento suoi. */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  text-align: center;
  text-decoration: none;
  color: var(--navy);

  cursor: none;
  -webkit-tap-highlight-color: transparent;
  /* Come su .btn-minimal: isola il contesto di sovrapposizione, così il
     disco di fondo può stare a z-index -1 senza finire dietro alla
     fotografia della sezione. */
  isolation: isolate;
  transition: transform .25s var(--ease-ink);
}
.btn-tondo > * { grid-area: 1 / 1; }

@media (min-width: 768px) {
  .btn-tondo { --btn-tondo-d: 132px; }
}

/* L'anello che gira. Ruota l'SVG, non il bottone: il segno al centro è
   un fratello e resta fermo. Curva lineare, obbligata — una rotazione
   perpetua con un ease pulserebbe a ogni giro, e questo sito non pulsa.
   18 secondi di periodo: è la famiglia dei movimenti continui del sito,
   che girano fra i 16 e i 21 secondi. Deve accorgersene solo chi guarda
   il bottone per qualche secondo. */
.btn-tondo-anello {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  transform-origin: 50% 50%;
  animation: btn-tondo-giro 18s linear infinite;
}
.btn-tondo-anello text {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 400;
  /* 8.5 unità del viewBox: 11.2px sul disco grande, 9.5px su quello
     piccolo. È il corpo delle micro-etichette del sito. La spaziatura
     non si imposta qui: la decide textLength, che distribuisce il testo
     sull'intera circonferenza. */
  font-size: 8.5px;
}
@keyframes btn-tondo-giro {
  to { transform: rotate(360deg); }
}

/* Il segno fermo al centro. Una freccia da 1px, come la linea che si
   allunga sotto .award-cta: dice «si va di là» senza aggiungere una
   seconda parola dentro un bottone che è già tutto parola. */
.btn-tondo-segno {
  width: 17%;
  height: 17%;
  overflow: visible;
}

/* Al passaggio del cursore compare l'anello sottile, identico a quello
   del pallino del menu (.hamburger-btn::after): 1px di currentColor che
   entra da .72 a 1 in .45s. Nessun rimbalzo, nessuna molla: nel sito non
   esiste un solo cubic-bezier che superi l'arrivo. */
.btn-tondo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.72);
  transition: opacity .45s var(--ease-ink), transform .45s var(--ease-ink);
  pointer-events: none;
}
.btn-tondo:hover::after { opacity: .45; transform: scale(1); }

/* Premuto: cede appena. Stessa risposta del bottone vecchio. */
.btn-tondo:active { transform: scale(.97); transition-duration: .08s; }

.btn-tondo:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

/* Dove il puntatore torna quello di sistema, torna anche qui.
   DEVE STARE DOPO la base, non nell'elenco del blocco @media in cima al
   foglio: una media query non aggiunge specificità, quindi lassù questa
   riga valeva (0,1,0) esattamente come il `cursor: none` qui sopra e
   perdeva per posizione — una regola scritta, letta, e senza alcun
   effetto. `.btn-minimal` se la cava solo perché il suo override sta più
   in basso della sua base. */
@media (hover: none) {
  .btn-tondo { cursor: pointer; }
}

/* ── Variante chiara: testo chiaro, per i fondi scuri ──
   È anche quella che finisce sopra una fotografia, dove il fondo cambia
   da un pixel all'altro e nessun colore è garantito: è il caso peggiore
   che questo bottone deve reggere. Due aiuti, tutti e due leggeri.
   Il primo è un alone blu sfumato che si spegne prima del bordo — un
   velo, non un disco: appoggia il testo su qualcosa di scuro senza
   disegnare una macchia grigia in mezzo alla fotografia. Il secondo è
   un'ombra morbida sulle lettere, che stacca il singolo segno anche se
   sotto capita un riflesso chiaro. Sul navy pieno della pagina About
   sono tutti e due blu su blu: non si vedono, e non costano niente. */
.btn-tondo--chiaro { color: var(--text-light); }
.btn-tondo--chiaro::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  /* IL COLORE DELL'ALONE È QUELLO DEL FONDO, non il blu del sito.
     Con il navy #0b1d3d al 30% il centro del bottone usciva #030f23 su
     uno sfondo #00091b: una macchia tonda, più chiara, ben visibile
     proprio dove il fondo è uniforme e non c'è niente da velare.
     Dello stesso colore del fondo l'alone al centro non si vede — mette
     #00091b sopra #00091b — e sopra una fotografia continua a fare il suo
     mestiere, perché lì sotto il colore è un altro.
     Se un giorno il fondo di questa sezione cambia, questo cambia con
     lui: è la sua ombra, non un colore scelto. */
  background: radial-gradient(circle closest-side,
    rgba(0, 9, 27, 0.34) 0%,
    rgba(0, 9, 27, 0.28) 58%,
    rgba(0, 9, 27, 0.15) 80%,
    rgba(0, 9, 27, 0) 100%);
  pointer-events: none;
}
.btn-tondo--chiaro .btn-tondo-anello,
.btn-tondo--chiaro .btn-tondo-segno {
  filter: drop-shadow(0 0 4px rgba(0, 9, 27, 0.75));
}

/* ── Variante scura: testo navy, per i fondi chiari ── */
.btn-tondo--scuro { color: var(--navy); }

/* ── Variante piena: il disco chiaro col testo navy ──
   Prende il posto di .btn-minimal.is-invert. Qui l'anello dell'hover
   resta dentro il disco e non fuori: fuori sarebbe blu sul blu della
   sezione, cioè invisibile proprio dove serve. Chiudendosi sul bordo del
   disco chiaro si vede benissimo, ed è lo stesso gesto. */
.btn-tondo--pieno { color: var(--navy); }
.btn-tondo--pieno::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--bg-light);
  pointer-events: none;
}
.btn-tondo--pieno::after { inset: 1px; }

/* Chi ha chiesto meno movimento non si merita una giostra perpetua nel
   campo visivo. Il blocco universale qui sopra azzera già le durate, ma
   un'animazione che dura un millesimo di secondo resta un'animazione:
   questa si spegne per nome, ed è l'unica del file. */
@media (prefers-reduced-motion: reduce) {
  .btn-tondo-anello { animation: none; }
}


/* ─── Pagina About ─── */
.about-page { background: var(--bg-light); }

.about-hero {
  padding: 132px 28px 0;
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .about-hero { padding-top: 176px; text-align: center; }
}

.about-name {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(38px, 8vw, 68px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--navy);
  margin: 16px 0 18px;
}

.about-role {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
  margin: 0;
}

.about-portrait { padding-top: 56px; }
@media (min-width: 768px) { .about-portrait { padding-top: 72px; } }

/* Il corpo lungo della pagina */
.about-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 28px 0;
}
@media (min-width: 768px) { .about-body { padding-top: 96px; } }

.about-body > h2:first-child { margin-top: 0; }

/* Elenco dei servizi */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(11, 29, 61, 0.14);
  border: 1px solid rgba(11, 29, 61, 0.14);
  margin: 30px 0 40px;
}
@media (min-width: 620px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }

.svc { background: var(--bg-light); padding: 20px 20px 22px; }
.svc-n {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin-bottom: 7px;
}
.svc-d {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(11, 29, 61, 0.62);
}

/* Chiusura della pagina About */
.about-cta {
  padding: 88px 28px 96px;
  border-top: 1px solid rgba(11, 29, 61, 0.12);
  margin-top: 80px;
}
@media (min-width: 768px) { .about-cta { padding: 112px 48px 120px; } }

.about-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 768px) { .about-cta-inner { text-align: center; } }

.about-cta-text {
  font-size: clamp(13px, 2.2vw, 15px);
  line-height: 1.65;
  color: rgba(11, 29, 61, 0.68);
  margin: 20px 0 34px;
  max-width: 46ch;
}
@media (min-width: 768px) { .about-cta-text { margin-left: auto; margin-right: auto; } }

.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
@media (min-width: 768px) { .about-cta-actions { justify-content: center; } }


/* ─────────────────────────────────────────────────────────────
   REVISIONE — cursore, footer, sfumatura dell'about
   ───────────────────────────────────────────────────────────── */

/* La barra di scorrimento del browser resta nascosta */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Su desktop nessun elemento deve riportare il puntatore di sistema:
   era quello che si sovrapponeva al cerchio sulle immagini e sui link. */
@media (hover: hover) and (pointer: fine) {
  a, button, input, textarea, select, label, summary,
  [role="button"], [onclick], picture, img, figure {
    cursor: none;
  }
}

/* Il cursore diventa chiaro sopra le sezioni blu */
.cursor.is-light { background: var(--bg-light); }
.cursor.is-light.is-image { background: var(--bg-light); }

/* Il premio nell'apertura è un collegamento */
a.vertical-text {
  text-decoration: none;
  color: var(--navy);
}
a.vertical-text:hover { opacity: .6; }

/* ─── ABOUT IN HOME: testo che sfuma e prosegue ─── */
.about-text.is-clamped {
  max-height: 330px;
  overflow: hidden;
  padding-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0,0,0,0.35) 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0,0,0,0.35) 82%, transparent 100%);
}
@media (min-width: 768px) {
  .about-text.is-clamped { max-height: 380px; }
}

.about-more {
  display: flex;
  justify-content: center;
  padding: 6px 28px 64px;
}
@media (min-width: 768px) { .about-more { padding-bottom: 80px; } }

/* Varianti del bottone su fondo scuro */
.btn-minimal.is-light {
  color: var(--text-light);
  border-color: rgba(238, 238, 239, 0.45);
}
.btn-minimal.is-light::before { background: var(--bg-light); }
.btn-minimal.is-light:hover {
  color: var(--navy);
  border-color: var(--bg-light);
}
.btn-minimal.is-invert {
  background: var(--bg-light);
  color: var(--navy);
  border-color: var(--bg-light);
}
/* Bottone chiaro su fondo blu: riempiendosi di blu diventerebbe
   invisibile, perché il fondo è già blu. Il bordo resta chiaro, così
   la forma si vede anche a riempimento avvenuto. */
.btn-minimal.is-invert::before { background: var(--navy); }
.btn-minimal.is-invert:hover {
  color: var(--bg-light);
  border-color: rgba(238, 238, 239, 0.85);
}

/* ─── CHIUSURA DELLA PAGINA ABOUT, IN BLU ─── */
.about-cta.on-dark {
  background: var(--navy);
  border-top: none;
}
.about-cta.on-dark .section-title { color: var(--text-light); }
.about-cta.on-dark .about-cta-text { color: rgba(238, 238, 239, 0.68); }

/* ─── RASSEGNA STAMPA ─── */
.press-intro {
  margin-bottom: 12px !important;
  color: rgba(11, 29, 61, 0.7);
}
.press-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 8px;
}
.press-row a {
  font-size: 15px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 29, 61, 0.3);
  padding-bottom: 2px;
  transition: border-color .2s ease, opacity .2s ease;
}
.press-row a:hover { border-bottom-color: var(--navy); opacity: .7; }
.press-row .sep { color: rgba(11, 29, 61, 0.3); }

/* ─── FOOTER: legali sulla stessa riga del copyright ─── */
.footer-bottom {
  border-top: 1px solid rgba(11, 29, 61, 0.15);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer-bottom .footer-copy {
  border-top: none;
  padding-top: 0;
  text-align: center;
  margin: 0;
}
.footer-bottom .footer-legal {
  margin-top: 0;
  gap: 6px 12px;
}

@media (min-width: 768px) {
  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }
  .footer-bottom .footer-legal.is-left  { justify-content: flex-start; }
  .footer-bottom .footer-legal.is-right { justify-content: flex-end; }
}


/* ═════════════════════════════════════════════════════════════
   REVISIONE DEL DESIGN — agosto 2026
   Menu a schermo intero, galleria per ristorante, carosello del
   journal, riconoscimenti in evidenza.
   Stessa grammatica di sempre: nessun raggio di bordo, linee da
   1px, micro-etichette 9-11px con spaziatura 0.15em, titoli
   PPNueMontreal 500, palette #eeeeef / #0b1d3d.
   ═════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. MENU A SCHERMO INTERO
   Il testo arriva a occupare tutta l'altezza disponibile: quattro
   parole, una sotto l'altra, alte quanto lo consente lo schermo.
   ───────────────────────────────────────────────────────────── */

/* Il bottone resta il cerchio pieno. Al passaggio del cursore un
   anello sottile si allarga intorno: l'unico segnale che serve. */
.hamburger-btn {
  position: fixed;
  overflow: visible;
  transition: background .3s var(--ease-soft), transform .45s var(--ease-ink);
}
.hamburger-btn::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--navy);
  opacity: 0;
  transform: scale(.72);
  transition: opacity .45s var(--ease-ink), transform .45s var(--ease-ink);
  pointer-events: none;
}
.hamburger-btn:hover::after { opacity: .45; transform: scale(1); }
.hamburger-btn.over-image::after { color: var(--bg-light); }
.hamburger-btn:hover { transform: scale(.88); }

/* Aperto: resta un pallino, e basta. Diventa chiaro perché sotto c'è
   il blu del pannello. La croce che c'era prima era un'aggiunta mia,
   non richiesta, e su un menu che riempie lo schermo non serviva:
   si capisce da sé che si richiude. */
.hamburger-btn.open {
  background: var(--bg-light);
  transform: none;
}
.hamburger-btn.open::after {
  opacity: .5;
  transform: scale(1);
  color: var(--bg-light);
}
.hamburger-btn.open::before { content: none; }
.hamburger-btn.open span { display: none; }

/* ─── Il pannello ─── */
/* Entra come l'inchiostro del resto del sito: un disco che si
   apre dal bottone e riempie lo schermo. Chiudendo, si richiude
   verso lo stesso punto. */
.nav-overlay {
  background: var(--navy);
  padding: 0;
  display: block;
  opacity: 1;
  overflow: hidden;
  clip-path: circle(0% at calc(100% - 39px) 36px);
  transition: clip-path .78s var(--ease-ink);
  pointer-events: none;
}
.nav-overlay.open {
  clip-path: circle(150% at calc(100% - 39px) 36px);
  pointer-events: all;
}

.nav-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 74px 24px 60px;
}
@media (min-width: 768px) {
  .nav-inner { padding: 84px 56px 64px; }
}

/* ─── Le voci ─── */
.nav-overlay .nav-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--text-light);
  opacity: 1;
  transform: none;
  transition: none;
  border-top: 1px solid rgba(238, 238, 239, 0.14);
  padding: 0;
}
.nav-overlay .nav-link:last-of-type { border-bottom: 1px solid rgba(238, 238, 239, 0.14); }

/* La riga nasconde la parola finché non è il suo turno: la parola
   sale da sotto la linea, non compare al centro dello schermo. */
.nav-line {
  display: block;
  overflow: hidden;
  padding: 0;
  /* L'allineamento della parola si dà qui, non sulla parola: la parola
     ora è larga quanto se stessa. */
  text-align: left;
}

.nav-word {
  /* Non «block»: «inline-block». La copia piena che si scopre al
     passaggio del cursore è posizionata a `left: 0` dentro questo
     elemento, quindi questo elemento deve essere largo quanto la
     parola — non quanto la riga. Da blocco lo era quanto la riga, e
     con il testo centrato (sul telefono) la copia piena partiva dal
     bordo sinistro mentre la parola stava in mezzo: si vedevano due
     scritte sfalsate, una chiara e una spenta. Da inline-block il
     riquadro si stringe sulla parola e le due copie coincidono per
     costruzione, con qualunque allineamento.
     L'allineamento passa alla riga, qui sotto. */
  display: inline-block;
  position: relative;
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  /* Quattro voci che riempiono l'altezza utile. Il limite in vh è
     quello che comanda quasi sempre: su uno schermo largo e basso
     13.5vw uscirebbe dallo schermo, e quattro righe da 17vh più i
     margini e la riga dei contatti stanno esatte in un'altezza di
     finestra. */
  font-size: clamp(40px, min(13.5vw, 17vh), 190px);
  line-height: .96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate3d(0, 105%, 0);
  transition: transform .78s var(--ease-ink);
  color: rgba(238, 238, 239, 0.34);
}
.nav-overlay.open .nav-word { transform: none; }
.nav-overlay.open .nav-link:nth-of-type(1) .nav-word { transition-delay: .16s; }
.nav-overlay.open .nav-link:nth-of-type(2) .nav-word { transition-delay: .24s; }
.nav-overlay.open .nav-link:nth-of-type(3) .nav-word { transition-delay: .32s; }
.nav-overlay.open .nav-link:nth-of-type(4) .nav-word { transition-delay: .40s; }

/* Al passaggio del cursore la parola si riempie di colore da
   sinistra a destra: la copia piena vive sopra quella spenta e
   viene scoperta con un clip. Stesso gesto dell'inchiostro. */
.nav-word-fill {
  position: absolute;
  left: 0; top: 0;
  color: var(--text-light);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .62s var(--ease-ink);
  pointer-events: none;
}
.nav-overlay .nav-link:hover .nav-word-fill,
.nav-overlay .nav-link:focus-visible .nav-word-fill { clip-path: inset(0 0 0 0); }

.nav-overlay .nav-link:hover { color: var(--text-light); }

/* Il numero d'ordine entra da destra al passaggio del cursore. */
.nav-index {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(14px, -50%);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(238, 238, 239, 0.4);
  opacity: 0;
  transition: opacity .45s var(--ease-ink), transform .45s var(--ease-ink);
  font-variant-numeric: tabular-nums;
}
.nav-overlay .nav-link:hover .nav-index,
.nav-overlay .nav-link:focus-visible .nav-index {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Premuto: la parola cede di un soffio. */
.nav-overlay .nav-link:active .nav-word { transform: translate3d(0, 4px, 0) scale(.994); }

/* Riga di contatti in fondo al pannello. */
.nav-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-ink) .5s, transform .6s var(--ease-ink) .5s;
}
.nav-overlay.open .nav-foot { opacity: 1; transform: none; }
.nav-foot a {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 238, 239, 0.5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.nav-foot a:hover {
  color: var(--text-light);
  border-bottom-color: rgba(238, 238, 239, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay { transition: opacity .2s linear; clip-path: none; opacity: 0; }
  .nav-overlay.open { opacity: 1; }
  .nav-word, .nav-word-fill, .nav-foot, .nav-index { transition: none !important; transform: none !important; }
  .nav-word { transform: none !important; }
  .hamburger-btn, .hamburger-btn::after, .hamburger-btn.open::before { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   2. GALLERIA PER RISTORANTE
   Le fotografie restano a due colonne, anche sul telefono. Attorno
   a ogni gruppo compare chi è il ristorante: su desktop nei due
   margini, su telefono sopra e sotto.

   È l'intervento con il maggior ritorno SEO di tutta questa
   revisione: fino a oggi quarantaquattro fotografie non dicevano
   a Google di chi fossero i piatti.
   ───────────────────────────────────────────────────────────── */
.gallery-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 5px;
}

.gallery-group .gallery-grid { margin: 0; }

/* Su telefono: nome sopra, fotografie, descrizione sotto.
   Ventotto pixel per lato, gli stessi del titolo di apertura, della
   sigla del premio e del pallino del menu: erano diciotto, e il testo
   della galleria correva più vicino al bordo di tutto il resto —
   sembrava un altro sito. */
.gg-side {
  padding: 30px 28px 22px;
}
.gg-side.gg-right { padding: 22px 28px 44px; }

.gallery-group-name {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(19px, 3.4vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 8px;
}
.gallery-group-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 29, 61, 0.25);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease-soft), opacity .25s var(--ease-soft);
}
.gallery-group-name a:hover { border-bottom-color: var(--navy); opacity: .7; }

.gallery-group-place {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.55);
  margin: 0 0 4px;
}

.gallery-group-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid rgba(11, 29, 61, 0.3);
  padding: 5px 9px;
}

.gallery-group-text {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(11, 29, 61, 0.68);
  margin: 0;
  /* Trentotto caratteri per riga. Cinquantadue, sul telefono, non erano
     un limite: erano più larghi dello schermo, quindi il testo arrivava
     sempre al bordo — e con quarantadue succedeva ancora, perché in
     questo carattere un «ch» è largo 7,6 px. Trentotto lasciano un
     margine vero a destra e una riga che si legge. */
  max-width: 38ch;
}

/* Su desktop i due testi vanno nei margini e restano agganciati
   mentre il gruppo di fotografie scorre. È il ritmo di un libro
   fotografico: la didascalia accompagna le immagini, non le
   interrompe. */
@media (min-width: 900px) {
  .gallery-group {
    grid-template-columns: minmax(150px, 1fr) minmax(0, 4.6fr) minmax(150px, 1fr);
    align-items: start;
    gap: 0 26px;
    margin-bottom: 5px;
  }
  .gg-side {
    position: sticky;
    top: 21vh;
    padding: 0;
  }
  .gg-left  { grid-column: 1; text-align: right; }
  .gg-right { grid-column: 3; text-align: left; }
  .gallery-group .gallery-grid { grid-column: 2; }

  /* ─── I due margini, specchiati ───

     Qui c'era un errore che si vedeva e non si spiegava: la colonna
     di destra teneva i margini interni del telefono anche sul
     computer. `.gg-side.gg-right` vale due classi, `.gg-side` da sola
     ne vale una: la riga scritta per il telefono batteva quella
     scritta per il computer, e restavano 28 px a sinistra, 28 a
     destra, 22 sopra e 44 sotto.

     Il risultato: il nome del ristorante stava a 26 px dalle
     fotografie, il testo dall'altra parte a 54, e l'ultima riga
     arrivava a 28 px dal bordo della finestra. Due margini diversi
     per la stessa cosa, uno per lato.

     Adesso le due colonne sono l'una lo specchio dell'altra: 28 px
     verso il bordo della pagina — la misura di tutto il sito, la
     stessa del titolo e del pallino del menu — e niente dalla parte
     delle fotografie, dove basta lo stacco della griglia. Da tutti e
     due i lati il testo comincia a 26 px dalle immagini.

     Il solo scarto che resta è di proposito, ed è verticale: 22 px
     in cima a destra portano la prima riga della descrizione sulla
     linea di base del nome del ristorante. È quello che allinea le
     due colonne per l'occhio — la sigla del luogo, sopra il nome, è
     alta la metà e non fa da riferimento. */
  .gg-side.gg-left  { padding: 0 0 0 28px; }
  .gg-side.gg-right { padding: 22px 28px 0 0; }

  .gg-left .gallery-group-name a { border-bottom-color: rgba(11, 29, 61, 0.25); }
  /* Larga quanto la colonna, ma non oltre trentaquattro caratteri:
     su un monitor molto largo la colonna cresce e una riga di
     quattrocento pixel a corpo 13 non si legge più. */
  .gg-right .gallery-group-text { max-width: 34ch; }
}

@media (min-width: 1400px) {
  .gallery-group { grid-template-columns: minmax(190px, 1fr) minmax(0, 4fr) minmax(190px, 1fr); }
}

/* ─────────────────────────────────────────────────────────────
   3. SEZIONE JOURNAL IN HOME
   Titolo e «leggi tutti gli articoli» sulla stessa riga, senza
   occhiello sopra. Le copertine galleggiano appena.
   ───────────────────────────────────────────────────────────── */
.journal-head {
  align-items: baseline;
  margin-bottom: 0;
  gap: 20px;
  flex-wrap: wrap;
}
.journal-head .journal-headline {
  margin-top: 0;
  flex: 1 1 auto;
}
.journal-head .journal-all { flex: 0 0 auto; }

/* Il binario non ha più le frecce: si trascina, si scorre con due
   dita o con le frecce della tastiera. La barra resta, perché
   dice a che punto sei. */
.rail-controls { gap: 0; }

/* Il binario scorre nel verso opposto: la scheda più recente sta
   a destra e si procede verso sinistra. */
.journal-rail { direction: rtl; }
.journal-rail > .j-card { direction: ltr; }

.j-card-float { display: block; }

/* La copertina cresce appena sotto il cursore; il resto della
   scheda no, altrimenti si muove tutto e diventa rumore. */
.j-card a:hover .j-card-img img { transform: scale(1.055); }
.j-card-img { transition: box-shadow .5s var(--ease-ink); }
.j-card a:hover .j-card-img { box-shadow: 0 22px 60px -28px rgba(11, 29, 61, 0.55); }

/* ─────────────────────────────────────────────────────────────
   4. PAGINA JOURNAL — carosello circolare
   L'impaginazione di base resta una griglia vera, leggibile da
   chiunque e da qualunque motore. Il carosello è un livello che
   il JavaScript aggiunge sopra: se non parte, la pagina funziona
   comunque.
   ───────────────────────────────────────────────────────────── */
.journal-page .page-hero { text-align: center; }
.journal-page .page-hero .page-sub { margin-left: auto; margin-right: auto; }


/* La scheda più recente ha un peso diverso dalle altre. */
.j-card.is-latest .j-title { font-size: clamp(19px, 2.6vw, 24px); }
/* Il marchio «ULTIMO» vive dentro la fotografia, appoggiato in basso a
   sinistra. Prima stava sotto, come elemento a sé: la fotografia
   galleggia — ha un `data-float` — e nel movimento gli passava sopra e
   lo copriva. Dentro il riquadro dell'immagine, che è quello che si
   muove, il problema non esiste più: si muovono insieme.

   Vale per le schede del Journal e per le polaroid in apertura: stesso
   marchio, stesso posto. */
.j-latest-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg-light);
  background: var(--navy);
  padding: 5px 9px 4px;
  margin: 0;
  pointer-events: none;
}

/* ─── Il carosello ─── */
.journal-stage {
  position: relative;
  margin: 8px -28px 0;
  padding: 0;
}
@media (min-width: 768px) { .journal-stage { margin: 16px -48px 0; } }

.journal-stage.is-carousel {
  height: 74vh;
  min-height: 480px;
  max-height: 760px;
  perspective: 1500px;
  perspective-origin: 50% 44%;
  overflow: hidden;
  /* `overflow: hidden` fa di questo riquadro un contenitore di
     scorrimento a tutti gli effetti, anche se non c'è niente da
     scorrere. Il gesto orizzontale parte da qui, non trova margine,
     e per la regola della catena risale ai genitori fino alla finestra:
     lì macOS lo prende per «indietro nella cronologia» e la pagina se
     ne va mentre si stanno guardando le fotografie. `contain` taglia la
     catena al primo anello.

     SOLO SULL'ASSE X, e la differenza non è un dettaglio. Scritto senza
     suffisso, `overscroll-behavior: contain` vale per tutti e due gli
     assi: e siccome questo riquadro è uno scroll container che non ha
     niente da scorrere, anche lo scorrimento VERTICALE si fermava qui
     invece di passare alla pagina. Il risultato era una fascia di sito
     alta quanto il carosello dentro la quale la rotella non faceva più
     niente — la pagina sembrava inchiodata. L'asse verticale non è mai
     stato nostro: quello lo scorre la pagina, e deve continuare a
     farlo. */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

.journal-stage.is-carousel .journal-grid {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.journal-stage.is-carousel .j-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(300px, 68vw);
  margin: 0;
  opacity: 1;
  /* La transizione qui è lunga di proposito: le diapositive di un
     proiettore non scattano, ruotano. */
  transition: transform .95s var(--ease-ink),
              opacity .95s var(--ease-ink),
              filter .95s var(--ease-ink);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
@media (min-width: 900px) {
  .journal-stage.is-carousel .j-card { width: 330px; }
}

/* Le diapositive lontane dal centro perdono fuoco e luce: è la
   profondità di campo del proiettore, ed è anche il modo più
   diretto per dire quale articolo stai guardando. */
.journal-stage.is-carousel .j-card:not(.is-front) {
  filter: blur(1.4px) brightness(.82);
}
.journal-stage.is-carousel .j-card.is-front {
  filter: none;
  z-index: 5;
}
.journal-stage.is-carousel .j-card:not(.is-front) a { pointer-events: none; }

.journal-stage.is-carousel .j-card-img { aspect-ratio: 1 / 1.16; }
.journal-stage.is-carousel .j-excerpt { display: none; }
.journal-stage.is-carousel .j-card.is-front .j-excerpt { display: block; }

/* Comandi del carosello: due tratti e il conteggio, al centro. */
.jc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 26px;
}
.jc-btn {
  width: 40px; height: 40px;
  border: 1px solid rgba(11, 29, 61, 0.25);
  background: none;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  padding: 0;
  transition: background .35s var(--ease-ink), color .35s var(--ease-ink),
              border-color .35s var(--ease-ink), transform .35s var(--ease-ink);
}
.jc-btn:hover {
  background: var(--navy);
  color: var(--bg-light);
  border-color: var(--navy);
  transform: scale(1.08);
}
.jc-btn:active { transform: scale(.94); }
.jc-btn svg { width: 12px; height: 12px; display: block; }

.jc-count {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(11, 29, 61, 0.5);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .journal-stage.is-carousel .j-card { transition: none; filter: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   5. ABOUT — riconoscimenti in evidenza
   Il premio e le testate erano due righe dentro il corpo del
   testo. Diventano un blocco a sé: sono la prova che il lavoro
   esiste fuori da questo sito, e per Google sono il segnale di
   autorevolezza più forte che la pagina possiede.
   ───────────────────────────────────────────────────────────── */
.awards {
  margin: 8px 0 8px;
  padding: 40px 0 8px;
  border-top: 1px solid rgba(11, 29, 61, 0.16);
}

.award-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0 0 36px;
}
@media (min-width: 760px) {
  .award-block {
    grid-template-columns: auto 1fr;
    gap: 34px;
    align-items: start;
  }
}

.award-year {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(38px, 7vw, 62px);
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--navy);
}

.award-line {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 3vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 10px;
}
.award-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 29, 61, 0.3);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease-soft);
}
.award-line a:hover { border-bottom-color: var(--navy); }

.award-note {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(11, 29, 61, 0.68);
  margin: 0 0 16px;
  max-width: 56ch;
}

.award-cta {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.award-cta::after {
  content: "";
  width: 20px; height: 1px;
  background: currentColor;
  transition: width .35s var(--ease-ink);
}
.award-cta:hover::after { width: 34px; }

/* Le testate: una per riga, con la linea che le separa. Elencate
   in colonna pesano quanto meritano; in fila sembravano una nota
   a piè di pagina. */
.press-list {
  border-top: 1px solid rgba(11, 29, 61, 0.16);
  margin-top: 6px;
}
/* Il selettore porta il tag davanti — `a.press-item` e non `.press-item` —
   e non è pedanteria. Queste righe stanno dentro <div class="about-body
   post-body">, e `.post-body a` (una classe più un tag) è più specifico
   della sola classe: la sua `transition` è una scorciatoia, e le
   scorciatoie sostituiscono, non si sommano. Il risultato era che il
   link del corpo testo cancellava la transizione di qui e lasciava in
   piedi soltanto la propria, sul bordo; al passaggio del cursore non
   c'era più niente da interpolare e la riga scattava a destra di colpo.
   Con il tag davanti la specificità pareggia e vinciamo per posizione,
   visto che questo blocco sta più in basso nel file.
   Il movimento poi non è più un padding: il padding è una misura del
   layout e obbliga il browser a rifare i conti dell'intera riga flex a
   ogni fotogramma, mentre transform resta una faccenda della scheda
   video. È la regola scritta in testa a motion.css: si anima solo
   opacity, transform e filter. La riga si sposta di 12px dentro i 28px
   di margine di .about-body, quindi non tocca il bordo della pagina. */
a.press-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(11, 29, 61, 0.12);
  text-decoration: none;
  color: var(--navy);
  transition: transform .4s var(--ease-ink), opacity .3s var(--ease-soft);
}
a.press-item:hover { transform: translateX(12px); }
.press-name {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 2.4vw, 20px);
  letter-spacing: -0.01em;
}
.press-what {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.48);
  text-align: right;
  flex: 0 1 auto;
}

/* ─── About: il riquadro finale al centro ─── */
.about-cta-inner { text-align: center; }
.about-cta-text {
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
}
.about-cta-actions { justify-content: center; }

/* ─── About: IT|EN centrato anche sul telefono ─── */
.about-lang { justify-content: center; }
@media (max-width: 767px) {
  .about-lang { justify-content: center; padding-left: 28px; padding-right: 28px; }
}

/* ─── Il «2026©» verticale non c'è più ─── */
.portrait-vertical-text { display: none; }


/* ─── Elenco nudo degli articoli ───
   Le polaroid si guardano e si spostano, questo si usa. Una riga per articolo,
   numero a sinistra, tempo di lettura a destra, una linea da 1px in
   mezzo. Nessun riquadro, nessuna copertina: è il contrario delle
   polaroid, ed è per questo che serve. */
.journal-list-wrap {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid rgba(11, 29, 61, 0.14);
}
@media (min-width: 768px) { .journal-list-wrap { margin-top: 56px; } }

.journal-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  counter-reset: none;
}

.journal-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(11, 29, 61, 0.1);
  text-decoration: none;
  color: var(--navy);
  /* Come la rassegna stampa qui sopra: si sposta con transform e non con
     padding-left. Qui il difetto non si vedeva, perché questo elenco sta
     fuori da .post-body e nessuno gli sovrascriveva la transizione — ma
     la fragilità è la stessa, e animare una misura del layout resta un
     modo per far ricalcolare la griglia trenta volte al secondo. */
  transition: transform .45s var(--ease-ink), border-color .3s var(--ease-soft);
}
@media (min-width: 768px) {
  .journal-list a { grid-template-columns: 34px 1fr auto; gap: 20px; padding: 17px 0; }
}
.journal-list a:hover,
.journal-list a:focus-visible {
  transform: translateX(14px);
  border-bottom-color: rgba(11, 29, 61, 0.4);
}

.jl-n {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(11, 29, 61, 0.35);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease-soft);
}
.journal-list a:hover .jl-n { color: rgba(11, 29, 61, 0.7); }

.jl-t {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 2.1vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.jl-m {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.42);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   POLAROID — la sezione blog della home

   Cinque polaroid impilate una sull'altra, appena ruotate, come se
   qualcuno le avesse lasciate sul tavolo. Si prendono e si
   trascinano dove si vuole: appena si comincia a spostarne una,
   quella passa a posizione fissa e da lì in poi galleggia sopra
   tutto il sito, anche scorrendo.

   Sotto la fotografia c'è il titolo dell'articolo, scritto nel
   bordo bianco. Un clic senza trascinamento apre l'articolo: il
   trascinamento e il collegamento convivono grazie a una soglia di
   movimento, sotto la quale il gesto è un clic.
   ───────────────────────────────────────────────────────────── */

.polaroid-stage {
  position: relative;
  margin-top: 34px;
  height: 460px;
  touch-action: pan-y;   /* la pagina scorre; le polaroid hanno la loro regola */
}
@media (min-width: 768px) { .polaroid-stage { height: 520px; } }

.polaroid {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--pl-w, 236px);
  margin-left: calc(var(--pl-w, 236px) / -2);
  background: #ffffff;
  padding: 13px 13px 0;
  box-shadow: 0 20px 54px -26px rgba(11, 29, 61, .55),
              0 2px 6px rgba(11, 29, 61, .08);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;    /* qui il dito trascina la polaroid, non la pagina */
  will-change: transform;
  /* La transizione vale per l'entrata in scena e per il ritorno a
     posto. Durante il trascinamento il JavaScript la spegne: una
     transizione mentre insegui il dito è ritardo, non morbidezza. */
  transition: box-shadow .45s var(--ease-ink), transform .7s var(--ease-ink);
}

@media (hover: hover) and (pointer: fine) {
  .polaroid { cursor: none; }
}

/* Sollevata: dritta, appena più grande, ombra lunga. La rotazione va
   a zero — una carta che tieni in mano la guardi dritta. */
.polaroid.is-dragging {
  transition: transform .38s var(--ease-ink), box-shadow .3s var(--ease-ink);
  /* Ombra più marcata di un quinto: .58 → .70 e .14 → .17. Una carta
     alzata dal tavolo fa più ombra, non la stessa più in là. */
  box-shadow: 0 52px 100px -30px rgba(11, 29, 61, .70),
              0 6px 14px rgba(11, 29, 61, .17);
}

/* Posata: resta dov'è, e non reagisce più al passaggio del cursore.
   Un oggetto appoggiato sul tavolo non si illumina quando ci passi
   sopra con lo sguardo. */
.polaroid.is-placed { box-shadow: 0 16px 44px -24px rgba(11, 29, 61, .5); }
.polaroid.is-placed:hover { box-shadow: 0 16px 44px -24px rgba(11, 29, 61, .5); }

/* Nel mucchio invece l'ombra risponde: dice che si può prendere. */
.polaroid:not(.is-placed):hover { box-shadow: 0 30px 70px -28px rgba(11, 29, 61, .6); }

/* L'atterraggio non è più un fotogramma chiave: lo disegna il
   JavaScript, fotogramma per fotogramma, perché deve seguire la
   velocità e la direzione del gesto — due cose che il CSS non conosce.
   Qui resta solo da togliere di mezzo la transizione: mentre la carta
   scorre, il `transform` viene riscritto a ogni fotogramma, e una
   transizione da 0,7 secondi sopra ogni scrittura la spalmerebbe.
   L'ombra invece deve rilassarsi con calma, da sollevata ad appoggiata:
   quella la transizione ce l'ha. */
.polaroid.is-landing {
  transition: box-shadow .38s var(--ease-ink);
}

.pl-img {
  position: relative;
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  background: #e4e4e6;
  display: block;
}
.pl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;   /* il trascinamento non deve mai afferrare l'immagine */
}

.pl-cap {
  display: block;
  padding: 15px 3px 17px;
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--navy);
  /* Due righe al massimo: una polaroid con sotto un paragrafo non è
     più una polaroid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pl-meta {
  display: block;
  padding: 0 3px 13px;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.42);
}

.polaroid a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Entrata: le polaroid arrivano sul tavolo una dopo l'altra. */
.polaroid {
  opacity: 0;
  transform: translate3d(0, 26px, 0) rotate(var(--pl-rot, 0deg)) scale(.96);
}
/* Spinta per contatto: quando una carta viene trascinata sopra le
   altre, quelle sotto si scostano di qualche pixel. Lo scarto arriva
   dal JavaScript in queste due variabili, e si somma alla rotazione
   che la carta ha già. */
.polaroid { --nx: 0px; --ny: 0px; }
.polaroid.is-in {
  opacity: 1;
  transform: translate3d(var(--nx), var(--ny), 0) rotate(var(--pl-rot, 0deg)) scale(1);
}
/* Mentre viene toccata si sposta svelta: sette decimi di secondo — la
   transizione normale — sarebbero un oggetto che segue, non uno
   urtato. */
.polaroid.is-toccata {
  transition: transform .34s var(--ease-ink), box-shadow .45s var(--ease-ink);
}
html:not(.js) .polaroid { opacity: 1; transform: none; position: static; margin: 0 auto 20px; }

/* Comandi della sezione: il suggerimento e il tasto per rimetterle a posto. */
.polaroid-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
  min-height: 22px;
}
.polaroid-hint {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.38);
  transition: opacity .5s var(--ease-soft);
}
.polaroid-stage-wrap.has-moved .polaroid-hint { opacity: 0; }

/* Compare in basso a destra sullo schermo appena si sposta la prima
   polaroid, e resta lì: le carte possono finire in qualunque punto
   della pagina, quindi il tasto per richiamarle deve essere sempre
   raggiungibile, non sepolto nella sezione da cui sono partite. */
.polaroid-reset {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 8600;
  /* Col menu aperto sparisce insieme alle polaroid. */
  /* Serve quando serve, e fino ad allora non deve chiedere niente:
     un rettangolo blu pieno in un angolo dello schermo pesa più delle
     polaroid che deve rimettere a posto. Resta una scritta con una
     riga sotto; il blu pieno arriva solo quando ci passi sopra. */
  background: transparent;
  color: rgba(11, 29, 61, 0.5);
  border: none;
  border-bottom: 1px solid rgba(11, 29, 61, 0.22);
  padding: 5px 1px 4px;
  font-family: 'PPNueMontreal', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .45s var(--ease-ink), transform .45s var(--ease-ink), background .3s var(--ease-soft);
}
body.polaroid-mosse .polaroid-reset {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
body.nav-open .polaroid-reset {
  opacity: 0;
  pointer-events: none;
}

/* ─── Il menu copre tutto, polaroid comprese ───
   Le carte trascinate finiscono nel <body> con uno z-index che sale a
   ogni presa, e si ritrovavano sopra il pannello del menu: si apriva il
   menu e restavano lì, appiccicate al blu. Il pannello e il pallino
   salgono sopra qualunque carta, e le carte si spengono mentre il menu
   è aperto — sotto un fondo pieno non c'è niente da guardare. */
body.nav-open .polaroid {
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s var(--ease-ink);
}
.polaroid-reset:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.polaroid-reset:active { transform: translateY(1px); }
@media (hover: none) { .polaroid-reset { cursor: pointer; } }

@media (prefers-reduced-motion: reduce) {
  .polaroid { transition: none; animation: none; transform: rotate(var(--pl-rot, 0deg)); opacity: 1; }
  .polaroid-reset { transition: none; }
}

/* Rimando alla pagina Journal in fondo all'elenco breve della home. */
.journal-seeall {
  display: inline-block;
  margin-top: 22px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 1px solid rgba(11, 29, 61, 0.3);
  padding-bottom: 4px;
  transition: border-color .3s var(--ease-soft), opacity .3s var(--ease-soft);
}
.journal-seeall:hover { border-bottom-color: var(--navy); opacity: .7; }

/* ─── APERTURA: il cuore, mezzo più grande ───
   Era troppo piccolo. Il limite però non era la larghezza: il riquadro
   sta dentro un contenitore flessibile alto quanto la finestra, e la
   fotografia si rimpiccioliva da sola per starci. Allargare il
   `max-width` non serviva a niente — l'ho verificato misurando prima e
   dopo: stessa identica dimensione.

   Quello che serve è spazio verticale. Si recupera stringendo i
   margini interni dell'apertura e alzando ancora il riquadro sopra il
   titolo, e si dichiara l'altezza in unità di finestra così la
   fotografia resta comunque dentro una schermata. */
.hero-image-wrap {
  padding: 8px 0 4px;
  align-items: flex-start;
}
/* Il riquadro si alza sopra la fascia del titolo — il titolo sta a
   sinistra, la fotografia al centro, non si toccano — ma non oltre:
   con -290px la cima del cuore finiva fuori dallo schermo. */
/* Il cuore si centra nello spazio che ha. Vale sul computer come sul
   telefono: prima il computer usava un margine negativo di 115 px
   tarato sul riquadro vecchio, pieno di vuoto — ritagliato il vuoto,
   quel margine tirava su la fotografia e la lasciava appesa in alto.

   Poi si sposta. Lo scarto vale sul CORPO del cuore, non sull'insieme:
   il ciuffo di plastica sta tutto nella metà alta della fotografia,
   quindi centrare il riquadro lasciava il cuore vero più in basso del
   dovuto. Le due percentuali qui sotto sono misurate, non stimate. */
.hero-image-wrap {
  align-items: center;
  margin-top: 0;
}
@media (min-width: 768px) {
  /* Sul computer il corpo del cuore sta in mezzo allo schermo.
     Lo scarto non è in percentuale del riquadro: quel riquadro
     comprende anche la didascalia, che è alta 28 px fissi e non
     cresce con lo schermo, quindi la percentuale cambierebbe da un
     monitor all'altro. È invece la stessa unità con cui è dichiarata
     la fotografia — min(44,6vw, 50,5vh) è la sua altezza — moltiplicata
     per 0,201. Così vale su qualunque schermo. */
  .hero-link { transform: translateY(calc(min(8.96vw, 10.15vh) * -1)); }
}
@media (max-width: 767px) {
  /* Sul telefono il corpo del cuore sta 15% della propria altezza
     sotto la metà dello schermo — la posizione chiesta a suo tempo.
     Centrato il riquadro, il corpo finiva già 26 px sotto: ne restano
     22 da tenere, quindi la correzione è di 4 px appena. Su un numero
     così piccolo la percentuale del riquadro va benissimo.
     I 16 px in meno sono una correzione a occhio chiesta dopo: il
     cuore stava ancora un filo basso. */
  .hero-link { transform: translateY(calc(-1.41% - 16px)); }
}

/* La misura si dà al riquadro, non all'immagine, e in unità di
   finestra. Con `width: auto` sull'immagine la dimensione finiva per
   dipendere da quale variante del `srcset` il browser aveva scelto —
   su uno schermo a bassa densità sarebbe uscita più piccola del
   voluto. Il riquadro invece ha una larghezza dichiarata, e
   l'immagine la riempie e basta.

   Il cuore è 1080×1920, cioè alto quasi il doppio di quanto è largo:
   una larghezza di 50vh corrisponde a un'altezza di circa 89vh, il
   massimo che sta in una schermata insieme al titolo e all'etichetta
   in basso. */
/* Centrato davvero. Ci sono volute due correzioni, perché le cause
   erano due:

   1. `#home` è una colonna flessibile con `align-items: flex-start`,
      quindi il contenitore dell'immagine non si allargava a tutta la
      pagina: si restringeva al suo contenuto più largo — la didascalia
      «Leggi la storia dello scatto» — e restava appoggiato a sinistra.
   2. Il riquadro della fotografia è un `inline-block`, e su un
      inline-block i margini automatici non centrano niente: valgono
      zero.

   La misura passa quindi al collegamento, che diventa largo esattamente
   quanto la fotografia: il contenitore lo centra, e la didascalia va a
   capo dentro quella larghezza invece di dettarla. */
.hero-image-wrap {
  width: 100%;
  align-self: stretch;
}

/* Le larghezze scendono della stessa frazione tolta dal ritaglio (0,88):
   il riquadro è più stretto, ma il cuore dentro resta grande uguale. */
.hero-link {
  width: min(70.4vw, 31.7vh);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .hero-link { width: min(40.5vw, 45.8vh); }
}

/* ─── Il vuoto intorno al cuore, tolto ───

   La fotografia non è una fotografia rettangolare: è un ritaglio su
   fondo trasparente. Il cuore occupa una parte soltanto del file, e
   tutto il resto è niente — trasparenza che sullo schermo si confonde
   con la pagina. Misurato sul file vero (506x900, canale alfa):

     · a sinistra   26,5% di vuoto
     · a destra     10,5% di vuoto (l'ombra si allunga da questa parte)
     · sopra        24,8% di vuoto
     · sotto        27,9% di vuoto

   Da qui venivano le due cose che si vedevano:

   1. «Non è centrato.» Il riquadro era centrato benissimo. Il cuore
      dentro il riquadro no: con 26,5% di vuoto a sinistra e 10,5% a
      destra, la massa scura cadeva a destra del centro della pagina.
   2. «La scritta sta troppo in basso.» Stava a 18 px dal bordo del
      riquadro, come deve. Solo che fra il fondo del cuore e quel bordo
      c'erano 146 px di trasparenza: sembrava staccata di mezzo schermo.

   Il rimedio è ritagliare il vuoto, non spostare le cose per compensarlo.
   Il riquadro diventa una finestra sulle proporzioni del solo soggetto e
   l'immagine ci scorre dentro ingrandita. Il taglio orizzontale è
   simmetrico rispetto al corpo del cuore — 10,5% da entrambi i lati —
   così il cuore è centrato davvero, e l'ombra a destra resta tutta
   dentro. */
.hero-image-wrap .hero-img-frame {
  width: 100%;
  max-width: none;
  display: block;
  position: relative;
  overflow: hidden;
  /*
     Ritaglio: dal 6,93% al 94,93% in larghezza, dal 20% al 74,5% in
     altezza. Il taglio orizzontale è centrato sul CORPO del cuore —
     la parte scura e opaca, misurata sul file: da 28,7% a 73,1%,
     centro 50,93% — non sull'insieme di cuore, ciuffo di plastica e
     ombra, che ha il baricentro spostato. Il ciuffo e l'ombra restano
     dentro: si taglia il vuoto, non la fotografia.
     I bordi stanno appena oltre il contenuto, che finisce a 89,3% e a
     72%: l'ombra sfuma nel nulla e non deve incontrare un taglio netto,
     o al posto del cuore si vede un rettangolo. */
  aspect-ratio: 0.9078;
}
.hero-image-wrap .hero-img-frame img {
  position: absolute;
  width: 113.64%;   /* 100 / 0,88 */
  left: -7.88%;     /* -6,93 / 0,88 */
  top: -36.70%;     /* -20 / 0,545 */
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
}


/* ─── Il conto alla rovescia del segreto ───

   Sedici quadratini sotto la fotografia, che si accendono uno alla
   volta. Non compaiono quasi mai: ci vuole la polaroid di «Wasted
   Heart» posata sopra il corpo del cuore, ferma, e tre secondi e
   mezzo di pazienza. Da lì in poi restano accesi per gli ultimi
   quattro secondi e mezzo dell'attesa.

   Servono a una cosa sola: dire che qualcosa sta contando. Cosa
   succede alla fine non lo dicono, ed è il motivo per cui il
   segreto resta un segreto. Il disegno è quello del gioco che
   apriranno — quadrati netti, blu su chiaro, niente sfumature.

   La barra sta al fondo del collegamento, sotto la didascalia:
   dentro il riquadro galleggerebbe insieme alla fotografia. */
.hero-link { position: relative; }

.cuore-carica {
  --acceso: 0;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 94px;      /* 16 blocchi da 4 px, 2 px di stacco */
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-m, .38s) var(--ease-soft, ease);
  background: linear-gradient(to right,
              var(--navy) 0 calc(var(--acceso) * 6px),
              rgba(11, 29, 61, .14) 0);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 4px, transparent 4px 6px);
          mask-image: repeating-linear-gradient(to right, #000 0 4px, transparent 4px 6px);
}
.cuore-carica.is-on { opacity: 1; }
.cuore-carica i { display: none; }   /* i blocchi li fa la maschera, non il DOM */

/* ─── Citazione di un articolo dentro il testo ───
   Un collegamento in mezzo a un paragrafo, con lo stesso identico
   carattere del testo, non si vede. Questo cambia peso e mette una
   linea sotto: si capisce che si può cliccare senza doverci passare
   sopra col cursore. */
/* Il rimando a un articolo dentro il testo. Prima al passaggio del
   cursore la linea cambiava colore di colpo e tutta insieme, e il testo
   si smorzava: due scatti in un quarto di secondo, che si leggevano
   come un interruttore.

   Ora la linea piena entra da sinistra in mezzo secondo, sopra quella
   spenta che resta sempre lì. Stesso gesto dei bottoni e del menu.
   Il fondo funziona anche se il collegamento va a capo, cosa che un
   pseudo-elemento non farebbe. */
/* Il selettore ha bisogno di `a` davanti: questi collegamenti stanno
   dentro `.post-body`, che ha una sua regola per i link — bordo che
   cambia colore in due decimi di secondo. A parità di peso vince
   l'ultima, e senza `a` questa non pareggiava nemmeno. Era da lì che
   veniva lo scatto. */
a.link-articolo {
  font-family: 'PPNueMontreal', sans-serif;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 29, 61, 0.28);
  padding-bottom: 1px;
  background-image: linear-gradient(var(--navy), var(--navy));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .5s var(--ease-ink), border-color .5s var(--ease-soft);
}
a.link-articolo:hover,
a.link-articolo:focus-visible {
  background-size: 100% 1px;
  border-bottom-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  a.link-articolo { transition: none; }
}

/* Le due righe che rimandano agli articoli, in fondo al metodo. */
.rimandi { margin: 30px 0 8px; }
.rimandi p {
  margin: 0 0 12px;
  font-size: clamp(13px, 2.1vw, 15px);
  line-height: 1.6;
  color: rgba(11, 29, 61, 0.68);
}
.rimandi .etichetta {
  display: block;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(11, 29, 61, 0.45);
  margin-bottom: 5px;
}

/* ─── Il pannello della bio in home porta alla pagina About ───
   Lo switch IT|EN qui non ha i testi delle due lingue e non poteva
   funzionare. Invece di lasciare due bottoni morti, tutto il pannello
   diventa un invito ad aprire la pagina About. */
.about-text-wrap[data-vai-about] { cursor: none; }
@media (hover: none) { .about-text-wrap[data-vai-about] { cursor: pointer; } }
.about-text-wrap[data-vai-about] .lang-switch button { pointer-events: none; }


/* ─── IT | EN: area cliccabile decente ───
   I due bottoni erano alti 15 pixel e larghi 11: un bersaglio del
   genere si manca, soprattutto col dito. Il testo resta della stessa
   dimensione — è una micro-etichetta e deve restarlo — ma attorno c'è
   spazio a sufficienza per colpirlo. Le linee guida chiedono almeno 24
   pixel per lato. */
.lang-switch button {
  padding: 8px 10px 9px;
  margin: -8px -4px -9px;
  min-width: 30px;
  min-height: 30px;
  line-height: 1;
}
.lang-switch { gap: 4px; }
.lang-switch button.is-active { border-bottom-color: transparent; }
/* La sottolineatura torna, ma disegnata dentro l'area allargata. */
.lang-switch button.is-active::after {
  content: "";
  display: block;
  height: 1px;
  margin: 4px auto 0;
  width: 100%;
  max-width: 18px;
  background: rgba(238, 238, 239, 0.6);
}
.about-page .lang-switch button.is-active::after { background: rgba(238, 238, 239, 0.6); }


/* ─────────────────────────────────────────────────────────────
   MENU SU TELEFONO — le parole occupano tutta la larghezza

   La misura non si può dare in CSS: ogni voce ha un numero di
   lettere diverso, quindi per riempire la stessa larghezza serve un
   corpo diverso per ognuna. Lo calcola site.js parola per parola.
   Qui c'è solo quello che il CSS può fare: tutto al centro, niente
   numeri d'ordine, contatti più grandi.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-inner {
    justify-content: center;
    padding: 64px 22px 44px;
  }

  .nav-overlay .nav-link { text-align: center; }

  .nav-line { text-align: center; }

  .nav-word {
    letter-spacing: -0.045em;
    line-height: .94;
    /* Ripiego se il calcolo del corpo non parte: meglio grande e
       centrato che minuscolo. */
    font-size: 17vw;
  }

  /* Il numero d'ordine sta a destra: con il testo centrato e largo
     quanto lo schermo non ha più spazio dove stare. */
  .nav-index { display: none; }

  /* Contatti: più grandi, e in colonna al centro. */
  .nav-foot {
    justify-content: center;
    text-align: center;
    gap: 14px 22px;
    margin-top: 34px;
  }
  .nav-foot a {
    font-size: 13px;
    letter-spacing: 0.12em;
    padding-bottom: 4px;
  }
}

/* ─────────────────────────────────────────────────────────────
   SELETTORE DI LINGUA — verticale, sotto il pallino del menu

   Stessa collocazione e stessa grammatica della sigla «WFPA | 2025»
   nella pagina d'apertura: testo verticale, in alto a destra.

   Sono due collegamenti veri verso lo stesso indirizzo nell'altra
   lingua, non due bottoni che scambiano il testo con il JavaScript.
   Così la pagina inglese ha un indirizzo suo, Google la trova, e
   l'hreflang già dichiarato nel <head> punta a qualcosa che esiste.
   ───────────────────────────────────────────────────────────── */
.lang-toggle {
  position: fixed;
  top: 62px;
  right: 28px;
  z-index: 999;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  gap: 7px;
  /* Stessa misura del pallino del menu, come «WFPA | 2025»:
     17.06pt = 22.75 px. Non è una micro-etichetta: sta sotto al
     pallino e deve leggersi come sua continuazione.
     Qui c'era scritto «18.15pt = 24.2 px», che è il passaggio
     intermedio di una misura poi calata del 6%: il commento era
     rimasto indietro rispetto alla riga che gli sta sotto. */
  font-size: 17.06pt;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--navy);
  transition: opacity .3s var(--ease-soft), color .3s var(--ease-soft);
}

.lang-toggle a,
.lang-toggle span {
  color: inherit;
  text-decoration: none;
  /* L'area cliccabile è più grande del testo: undici pixel di
     larghezza non si colpiscono, soprattutto col dito. */
  padding: 7px 6px;
  margin: -7px -6px;
  transition: opacity .25s var(--ease-soft);
}

.lang-toggle a { opacity: .45; }
.lang-toggle a:hover { opacity: .9; }
.lang-toggle a.is-active { opacity: 1; }
.lang-toggle .sep { opacity: .3; padding: 0; margin: 0; }

/* Lingua non disponibile per questa pagina: si vede, non si clicca. */
.lang-toggle .is-off {
  opacity: .22;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .lang-toggle a { cursor: none; }
}

/* Sopra una sezione blu o una fotografia il selettore si schiarisce. */
.lang-toggle.is-light { color: var(--bg-light); }

/* Mentre il menu è aperto sparisce: là dentro la lingua non si cambia. */
body.nav-open .lang-toggle { opacity: 0; pointer-events: none; }

/* In apertura il selettore non c'è: quel posto è di «WFPA | 2025».
   Compare scendendo, quando si arriva alle polaroid, e se si torna su
   se ne va — la sigla del premio riprende il suo angolo. */
.lang-toggle.is-differita {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .5s var(--ease-ink), transform .5s var(--ease-ink),
              color .3s var(--ease-soft);
}
.lang-toggle.is-differita.si-vede {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .lang-toggle.is-differita { transition: opacity .2s linear; transform: none; }
}

@media (max-width: 767px) {
  /* Stesso scarto dal bordo del pallino — 28 px — altrimenti la
     colonna «IT | EN» non gli sta esattamente sotto. */
  /* Sul telefono un altro 6%: 17,06 → 16,04pt, cioè 21,39 px, la
     stessa misura che prende il pallino qui sotto. Sul computer
     restano 17,06pt: là lo spazio c'è. */
  .lang-toggle { top: 58px; right: 28px; font-size: 16.04pt; }
}