/* ============================================================
   NIINstudio — Sistema editoriale "rivista"
   Palette fissata · Tipografia: Space Grotesk / Spline Sans Mono
   Carta-dominante · Navy per i momenti drammatici · Terracotta accento raro
   ============================================================ */

:root {
  /* ---- Palette fissata ---- */
  --carta:      #F5F1E8;   /* fondo dominante */
  --carta-2:    #EFEADD;   /* carta leggermente più fonda (alternanza sezioni) */
  --navy:       #012D4F;   /* struttura / inchiostro / momenti drammatici */
  --slate:      #1F2933;   /* testo secondario su chiaro */
  --terracotta: #B5532E;   /* accento raro su chiaro (kicker, link, capolettera, citazioni, bottoni) */
  --champagne:  #EAD9B0;   /* scintilla rara SOLO su navy */
  --border:     #1F2933;   /* bordi / divisori — grigio scuro (come il testo, stile groth) */
  --navy-soft:  rgba(1, 45, 79, 0.62);

  /* ---- Tipografia (sans-serif) ---- */
  --display: 'Space Grotesk', system-ui, -apple-system, Arial, sans-serif;
  --serif:   'Space Grotesk', system-ui, -apple-system, Arial, sans-serif;
  --mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Scala tipografica (mobile-first, fluida) ---- */
  --t-mega:   clamp(3.6rem, 18vw, 12rem);   /* logotipo hero */
  --t-d1:     clamp(2.6rem, 9vw, 6rem);      /* display 1 */
  --t-d2:     clamp(2rem, 6vw, 4rem);        /* display 2 */
  --t-h1:     clamp(1.9rem, 5vw, 3.2rem);
  --t-h2:     clamp(1.45rem, 3.4vw, 2.1rem);
  --t-h3:     clamp(1.18rem, 2.2vw, 1.45rem);
  --t-lead:   clamp(1.18rem, 2.3vw, 1.5rem);  /* sommario / lead */
  --t-body:   clamp(1.06rem, 1.4vw, 1.18rem);
  --t-small:  0.94rem;
  --t-meta:   0.74rem;                        /* mono labels */

  /* ---- Spazio ---- */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  /* Aria unica di inizio/fine sezione = stesso passo verticale delle
     schede progetto (.g-proj): il ritmo è identico in tutta la pagina. */
  --sect-pad: clamp(2.4rem, 5vw, 4rem);
  --maxw: 1440px;
  --reading: 38rem;   /* colonna di lettura stretta ~60-72ch */
  --radius: 12px;     /* angoli arrotondati immagini */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--navy);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--terracotta); color: var(--carta); }

/* height:auto neutralizza l'attributo height di WP, altrimenti vince
   sull'aspect-ratio CSS e le card escono di altezze diverse */
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* I link ereditano colore e NON sono mai sottolineati di default:
   l'evidenza la danno solo i componenti (link-arrow, btn, .prose a, ...). */
a { color: inherit; text-decoration: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--full { max-width: none; padding-inline: 0; }

.section { padding-block: var(--sect-pad); }
.section--tight { padding-block: var(--sect-pad); }

/* Momento drammatico su navy */
.section--navy { background: var(--navy); color: var(--carta); }
.section--navy a { color: var(--champagne); }
.section--carta2 { background: var(--carta-2); }

.divider { border: 0; border-top: 1px solid var(--border); margin: 0; }
.section--navy .divider { border-top-color: rgba(245,241,232,0.18); }

/* ============================================================
   TIPOGRAFIA — UTILITY
   ============================================================ */
.kicker {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
}
.section--navy .kicker { color: var(--champagne); }
.kicker::before {
  content: "";
  width: 0.5em; height: 0.5em;
  background: currentColor;
  display: inline-block;
  flex: none;
}

.meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.section--navy .meta { color: rgba(245,241,232,0.7); }

.display {
  font-family: var(--display);
  font-weight: 460;
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.display--mega {
  font-size: var(--t-mega);
  font-weight: 420;
  letter-spacing: -0.035em;
  line-height: 0.84;
}

h1, h2, h3 { font-family: var(--display); font-weight: 480; line-height: 1.04; letter-spacing: -0.018em; text-wrap: balance; margin: 0; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  font-weight: 380;
  max-width: 40rem;
}

.serif-bold { font-weight: 600; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0.9rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  font-family: var(--display);
  font-size: 1.34rem;
  font-weight: 540;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--navy);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.brand .logo { color: var(--navy); }
.brand__studio { font-style: italic; font-weight: 420; font-size: 1.18rem; }
.brand b { color: var(--terracotta); font-weight: 540; }
.nav__meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  display: none;
}
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav__links a {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  position: relative;
  padding-block: 0.2rem;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--terracotta);
  transition: right 0.4s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after { right: 0; }
.nav__links a[aria-current] { color: var(--terracotta); }
.nav__cta {
  display: none;
}
@media (min-width: 760px) {
  .nav__meta { display: block; }
  .nav__cta { display: inline-flex; }
}
/* nascondi alcune voci su mobile molto stretto */
.nav__links a.is-secondary { display: none; }
@media (min-width: 600px) { .nav__links a.is-secondary { display: inline; } }

/* ============================================================
   BOTTONI
   ============================================================ */
.btn {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.85em 1.4em;
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
  background: transparent;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), gap 0.35s var(--ease);
}
.btn:hover { background: var(--terracotta); color: var(--carta); gap: 1.1em; }
.btn--solid { background: var(--terracotta); color: var(--carta); }
.btn--solid:hover { background: var(--navy); border-color: var(--navy); }
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Su navy: niente terracotta → bottone champagne/carta */
.section--navy .btn { border-color: var(--champagne); color: var(--champagne); }
.section--navy .btn:hover { background: var(--champagne); color: var(--navy); }
.section--navy .btn--solid { background: var(--champagne); color: var(--navy); }
.section--navy .btn--solid:hover { background: var(--carta); border-color: var(--carta); }

.link-arrow {
  font-family: var(--mono);
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--terracotta);
  display: inline-flex; align-items: center; gap: 0.55em;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: currentColor; gap: 0.85em; }
.link-arrow .arrow { transition: transform 0.3s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(3px); }
.section--navy .link-arrow { color: var(--champagne); }

/* ============================================================
   PLACEHOLDER IMMAGINI (a righe sottili + didascalia mono)
   ============================================================ */
.ph {
  position: relative;
  background-color: var(--carta-2);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 11px,
    rgba(1,45,79,0.05) 11px 12px
  );
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: flex-end; justify-content: flex-start;
  overflow: hidden;
  color: var(--slate);
}
.ph::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy-soft);
  padding: 0.7rem 0.85rem;
  display: block;
}
.ph--navy {
  background-color: #0a3357;
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(234,217,176,0.08) 11px 12px);
  border-color: rgba(245,241,232,0.15);
}
.ph--navy::after { color: rgba(234,217,176,0.7); }
.ratio-43 { aspect-ratio: 4/3; }
.ratio-32 { aspect-ratio: 3/2; }
.ratio-11 { aspect-ratio: 1/1; }
.ratio-169 { aspect-ratio: 16/9; }
.ratio-34 { aspect-ratio: 3/4; }
.ratio-23 { aspect-ratio: 2/3; }

/* ============================================================
   FOOTER (momento drammatico — navy)
   ============================================================ */
.footer { background: var(--slate); color: var(--carta); padding-block: clamp(3.5rem, 8vw, 6rem); }
.footer a { color: var(--carta); text-decoration: none; }
.footer__grid {
  display: grid; gap: 2.5rem 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer__big { font-family: var(--display); font-size: var(--t-d2); line-height: 0.98; font-weight: 420; letter-spacing: -0.02em; }
.footer__big .spark { color: var(--champagne); font-style: italic; }
.footer__col h4 { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,241,232,0.55); font-weight: 500; margin: 0 0 1rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-family: var(--mono); font-size: 0.82rem; }
.footer__col ul a { opacity: 0.85; }
.footer__col ul a:hover { opacity: 1; color: var(--champagne); }
.footer__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(245,241,232,0.18); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,241,232,0.6); }

/* ============================================================
   COMPONENTI EDITORIALI (articoli)
   ============================================================ */
/* colonna di lettura */
.reading > * { max-width: var(--reading); }
.reading > .full { max-width: none; }
.reading p { margin: 0 0 1.3em; }
.reading h2 { font-size: var(--t-h2); margin: 2.4em 0 0.6em; }
.reading h3 { font-size: var(--t-h3); margin: 2em 0 0.5em; }

/* capolettera */
.dropcap::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 4.6em;
  line-height: 0.74;
  font-weight: 460;
  padding: 0.06em 0.12em 0 0;
  color: var(--terracotta);
}

/* citazione editoriale */
.pullquote {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  font-weight: 400;
  font-style: italic;
  color: var(--terracotta);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1em 0;
  margin: 1.8em 0;
  max-width: none;
  text-wrap: balance;
}

/* box di sintesi / TL;DR */
.summary {
  background: var(--carta-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--terracotta);
  padding: clamp(1.3rem, 3vw, 2rem);
  margin: 0 0 2.5rem;
  max-width: none;
}
.summary h4 { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 0.8rem; }
.summary p { font-size: 1.08rem; margin: 0; }
.summary ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.summary li { margin-bottom: 0.4rem; }

/* indice / TOC */
.toc { font-family: var(--mono); font-size: 0.82rem; }
.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.toc li { counter-increment: toc; }
.toc a { text-decoration: none; color: var(--slate); display: flex; gap: 0.8em; align-items: baseline; transition: color 0.25s; letter-spacing: 0.03em; }
.toc a::before { content: "0" counter(toc); color: var(--terracotta); font-size: 0.72rem; font-weight: 500; }
.toc a:hover { color: var(--terracotta); }

/* tabella semplice */
.dl { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.dl > div { display: grid; grid-template-columns: 1fr; gap: 0.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
@media (min-width: 560px) { .dl > div { grid-template-columns: 14rem 1fr; gap: 1.5rem; } }
.dl dt { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); margin: 0; }
.dl dd { margin: 0; }

/* eyebrow di pagina articolo */
.article-head .meta-row { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1rem 0; }

/* ============================================================
   MOTION (entrance) — rispetta reduced-motion
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   LOGO (monogramma NIIN) — ricolorabile via color
   ============================================================ */
.logo { display: inline-block; color: var(--navy); }
.logo svg { display: block; height: 100%; width: auto; fill: currentColor; }
.section--navy .logo, .footer .logo { color: var(--carta); }

/* ============================================================
   LINEA-TRATTO tra blocchi (stile editoriale / groth)
   etichette mono ai margini, hairline che attraversa
   ============================================================ */
.trace {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
  padding-top: clamp(2.5rem, 6vw, 5rem);
}
.trace__n { color: var(--terracotta); }
.trace__t { white-space: nowrap; }
.trace__line { flex: 1; height: 1px; background: var(--slate); min-width: 1.5rem; }
.trace__r { white-space: nowrap; opacity: 0.7; }
.section--navy .trace { color: rgba(245,241,232,0.65); }
.section--navy .trace__n { color: var(--champagne); }
.section--navy .trace__line { background: rgba(245,241,232,0.2); }

/* ============================================================
   ASSONOMETRIE — disegni a tratto (line art tecnico)
   stroke = currentColor, ricolorabili
   ============================================================ */
.axo { width: 100%; height: auto; color: var(--navy); display: block; }
.axo path, .axo rect, .axo line, .axo polyline { vector-effect: non-scaling-stroke; }
.section--navy .axo { color: var(--champagne); }
.axo--terra { color: var(--terracotta); }

/* ============================================================
   PAGINA PROGETTO (single-progetto) — stile groth/corners
   ============================================================ */

/* --- Testata (carta-2, modello "Corners"): titolo+scheda → hero → intro --- */
.progetto-testata {
  background: var(--carta-2);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 9vw, 7rem);
}
.progetto-testata .progetto-foto--hero { margin-top: clamp(2.2rem, 5vw, 4rem); }

/* intro: assonometria a sinistra, lead + testo a destra */
.progetto-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.2rem, 5vw, 4rem);
}
@media (min-width: 860px) {
  .progetto-intro { grid-template-columns: 1fr 1.4fr; }
  /* Senza assonometria il testo occupa tutta la riga. */
  .progetto-intro--no-axo { grid-template-columns: 1fr; }
}
.progetto-intro__axo { max-width: 320px; color: var(--navy); }
.progetto-intro__testo .lead { font-weight: 500; margin: 0 0 1.2em; }
.progetto-intro__testo p { max-width: 52ch; margin: 0 0 1.1em; }
.progetto-intro__testo > :last-child { margin-bottom: 0; }

/* --- Testata: titolo grande a sinistra, scheda a griglia a destra --- */
.progetto-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 760px) {
  .progetto-head { grid-template-columns: 1.25fr 1fr; }
}
.progetto-head__title {
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  line-height: 0.94;
  margin: 0;
}
.progetto-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem) 1.5rem;
  margin: 0.4rem 0 0;
}
.progetto-meta__item dt {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.3rem;
}
.progetto-meta__item dd {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}

/* --- Filetto scuro a tutta larghezza tra le sezioni (come da tema) --- */
.progetto-testata + .progetto-sez,
.progetto-sez + .progetto-sez,
.progetto-nav {
  border-top: 1px solid var(--border);
}

/* --- Foto grandi: dentro il wrap → aria a destra e sinistra (non edge-to-edge) --- */
.progetto-foto { margin: 0; }
.progetto-foto img {
  width: 100%;
  height: clamp(300px, 62vh, 680px);
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.progetto-foto--hero img { height: clamp(340px, 74vh, 780px); }

/* --- Assonometria (1/4) sopra, testo sotto --- */
.progetto-sez__axo {
  width: 25%;
  min-width: 80px;
  max-width: 170px;
  color: var(--navy);
  margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem);
}
.progetto-sez__axo .axo { width: 100%; height: auto; }

/* --- Sezione solo testo --- */
.progetto-sez__nota { max-width: 46ch; }
.progetto-sez__nota h2,
.progetto-due__nota h2 {
  font-family: var(--display);
  font-size: var(--t-h2);
  margin: 0 0 0.5em;
}
.progetto-sez__nota p,
.progetto-due__nota p {
  margin: 0;
  white-space: pre-line;
}

/* --- Sezione a due colonne: foto | assonometria+testo --- */
.progetto-due {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
@media (min-width: 860px) {
  .progetto-due { grid-template-columns: 1fr 1fr; }
  .progetto-due--flip .progetto-due__foto { order: 2; }
}
.progetto-due__foto img {
  width: 100%;
  height: clamp(280px, 50vh, 600px);
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.progetto-due__nota { max-width: 44ch; }

/* --- Navigazione progetto --- */
.progetto-nav__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  border-top: 1px solid var(--border);
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
}

/* ============================================================
   GALLERIA — layout editoriale "foto guida" (testata progetto)
   .trace mono + griglia: prima foto 2×2, le altre uniformi.
   Righe ad altezza fissa → la guida copre 2 righe; clic → lightbox.
   ============================================================ */
.proj-gal { margin-top: clamp(2.2rem, 5vw, 4rem); }
.proj-gal .trace { padding-top: 0; margin-bottom: clamp(1rem, 2.2vw, 1.6rem); }

.proj-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(110px, 30vw, 170px);
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1.4vw, 1rem);
}
@media (min-width: 600px) {
  .proj-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(150px, 20vw, 200px);
  }
}
@media (min-width: 960px) {
  .proj-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(150px, 14vw, 215px);
  }
}

.proj-grid__cell {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
/* Foto guida: due colonne per due righe (su mobile resta a piena larghezza). */
.proj-grid__cell--lead {
  grid-column: span 2;
  grid-row: span 2;
}
/* Modulo verticale (foto in verticale): una colonna, due righe. */
.proj-grid__cell--tall {
  grid-row: span 2;
}
/* Modulo orizzontale: due colonne, una riga. */
.proj-grid__cell--wide {
  grid-column: span 2;
}

.proj-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.6s var(--ease);
}
.proj-grid__cell:hover .proj-grid__img { transform: scale(1.05); }

/* Numero progressivo mono in basso a sinistra, visibile al passaggio. */
.proj-grid__n {
  position: absolute;
  left: 0.55rem;
  bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--carta);
  background: rgba(1, 45, 79, 0.62);
  padding: 0.12rem 0.42rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.proj-grid__cell:hover .proj-grid__n { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .proj-grid__img,
  .proj-grid__n { transition: none; }
  .proj-grid__cell:hover .proj-grid__img { transform: none; }
}

/* ============================================================
   GALLERIA — filmstrip (testata progetto)
   Striscia orizzontale con scroll-snap: altezza fissa, larghezza
   naturale (proporzioni reali, niente crop). Numerino + didascalia
   mono sotto ogni foto; frecce nel .trace; drag col mouse (site.js).
   ============================================================ */
.proj-strip { margin-top: clamp(2.2rem, 5vw, 4rem); }
.proj-strip .trace { padding-top: 0; margin-bottom: clamp(1rem, 2.2vw, 1.6rem); }

.proj-strip__nav { display: flex; gap: 0.5rem; }
.proj-strip__btn {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--navy);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.proj-strip__btn:hover { color: var(--terracotta); border-color: var(--terracotta); }
.proj-strip__btn svg { width: 1.3rem; height: 0.95rem; }

.proj-strip__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.proj-strip__track::-webkit-scrollbar { display: none; }
.proj-strip__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.proj-strip__track.is-drag .proj-strip__img { pointer-events: none; }

.proj-strip__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.proj-strip__fig { margin: 0; }
.proj-strip__img {
  display: block;
  height: clamp(280px, 46vh, 480px);
  width: auto;
  max-width: 84vw; /* le panoramiche molto larghe non coprono più schermate */
  object-fit: cover;
  border-radius: var(--radius);
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 600px) {
  .proj-strip__img { height: clamp(220px, 36vh, 300px); }
}

.proj-strip__cap {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  max-width: 100%;
}
.proj-strip__num { color: var(--terracotta); }
.proj-strip__lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   LIGHTBOX / CAROSELLO — momento drammatico su navy
   (immagini progetto e work in progress; markup creato da site.js)
   ============================================================ */
img[data-zoom] { cursor: zoom-in; }

.lb {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(1, 45, 79, 0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.lb.is-open { opacity: 1; pointer-events: auto; }

/* Feedback di caricamento: anello champagne al centro, con ritardo
   d'ingresso così sui caricamenti rapidi non lampeggia. */
.lb::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2rem; height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 2px solid rgba(245, 241, 232, 0.22);
  border-top-color: var(--champagne);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.35s;
}
.lb.is-loading::after {
  opacity: 1;
  animation: lb-spin 0.8s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

.lb__fig {
  margin: 0;
  max-width: min(1200px, 86vw);
  text-align: center;
  cursor: zoom-out;
}
.lb__img {
  /* 100% del contenitore .lb__fig: se la foto è più larga (panoramiche)
     si ferma lì e resta centrata, invece di sbordare a destra. */
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  cursor: default;
  opacity: 0; transform: scale(0.985);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.lb__img.is-in { opacity: 1; transform: none; }
.lb__cap {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.75);
  margin-top: 1.1rem;
  cursor: default;
}

.lb__count {
  position: absolute; top: 1.3rem; left: 1.5rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  color: var(--champagne);
}

.lb__close,
.lb__nav {
  position: absolute;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(245, 241, 232, 0.35);
  color: var(--carta);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.lb__close:hover,
.lb__nav:hover { color: var(--navy); border-color: var(--champagne); background: var(--champagne); }

.lb__close {
  top: 1.1rem; right: 1.3rem;
  width: 2.6rem; height: 2.6rem;
}
.lb__close svg { width: 1rem; height: 1rem; }

.lb__nav {
  top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem;
}
.lb__nav svg { width: 1.4rem; height: 1rem; }
.lb__nav--prev { left: clamp(0.8rem, 3vw, 2.5rem); }
.lb__nav--next { right: clamp(0.8rem, 3vw, 2.5rem); }

@media (max-width: 700px) {
  .lb__fig { max-width: 94vw; }
  .lb__img { max-height: 70vh; }
  .lb__nav { top: auto; bottom: 1.2rem; transform: none; }
  .lb__nav--prev { left: 1.2rem; }
  .lb__nav--next { right: 1.2rem; }
}

/* ============================================================
   RISULTATI DI RICERCA (search.php)
   ============================================================ */
.cerca-titolo {
  font-size: var(--t-d2);
  margin: 1.4rem 0 1.6rem;
  max-width: 24ch;
  line-height: 1.0;
  overflow-wrap: anywhere;
}
/* Barra di ricerca come campo-foglio: fondo bianco e bordo pieno,
   il bottone vive dentro la barra (il solo filetto sotto si perdeva). */
.cerca-form {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.45rem 0.45rem 0.45rem 1rem;
  max-width: 44rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cerca-form:focus-within {
  border-color: var(--terracotta);
  box-shadow: inset 0 0 0 1px var(--terracotta);
}
.cerca-form .btn { flex: none; }
.cerca-form__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 440;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.cerca-form__input::placeholder { color: rgba(1, 45, 79, 0.32); }
.cerca-form__input::-webkit-search-cancel-button { display: none; }

.cerca-lista {
  display: flex;
  flex-direction: column;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.cerca-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.5rem;
  padding: clamp(1.2rem, 2.5vw, 1.7rem) 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--navy);
  align-items: start;
}
.cerca-item:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 720px) {
  .cerca-item { grid-template-columns: 7rem 1fr auto; }
}
.cerca-item__tipo {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding-top: 0.35em;
  grid-column: 1 / -1;
}
@media (min-width: 720px) { .cerca-item__tipo { grid-column: auto; } }
.cerca-item__corpo h2 {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 480;
  margin: 0;
  transition: color 0.25s;
}
.cerca-item:hover .cerca-item__corpo h2 { color: var(--terracotta); }
.cerca-item__corpo p {
  margin: 0.4rem 0 0;
  font-size: 0.97rem;
  color: var(--slate);
  max-width: 64ch;
}
.cerca-item__arr {
  color: var(--terracotta);
  padding-top: 0.3em;
}
.cerca-item__arr .arr { width: 1rem; height: 1rem; display: inline-block; transition: transform 0.4s var(--ease); }
.cerca-item__arr .arr svg,
.cerca-item__arr svg { width: 1rem; height: 1rem; stroke: currentColor; display: block; }
.cerca-item:hover .cerca-item__arr .arr { transform: translate(3px, -3px); }

/* paginazione (markup WP) */
.pagination { margin-top: clamp(2rem, 5vw, 3rem); }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pagination a,
.pagination .current {
  text-decoration: none;
  color: var(--navy);
  padding: 0.35em 0.7em;
  border: 1px solid transparent;
}
.pagination a:hover { color: var(--terracotta); }
.pagination .current { border-color: var(--border); color: var(--terracotta); }
.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.cerca-vuoto { margin-top: clamp(2rem, 5vw, 3rem); }
.cerca-vuoto__vie {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.2rem;
  margin-top: 1.4rem;
}

/* ============================================================
   CHIPS TIPOLOGIE (filtro portfolio / archivi tipologia)
   ============================================================ */
.tipo-chips {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  /* aria tra le chips e la prima scheda progetto */
  margin-bottom: clamp(2.4rem, 6vw, 4.5rem);
}
.tipo-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--slate);
  border: 1px solid var(--border);
  padding: 0.45em 0.9em;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.tipo-chip:hover { color: var(--terracotta); border-color: var(--terracotta); }
.tipo-chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--carta); }
.tipo-chip__n { color: var(--terracotta); margin-left: 0.35em; }
.tipo-chip.is-active .tipo-chip__n { color: var(--champagne); }

/* utility */
.flow > * + * { margin-top: var(--flow, 1.2rem); }
.mono { font-family: var(--mono); }
.tc { color: var(--terracotta); }
.italic { font-style: italic; }
.center { text-align: center; }