/* ============================================================================
   HOMO LAPIS 2026 — SEZIONI
   ---------------------------------------------------------------------------
   Il chiaro e il nero si alternano, come su Instrument, Locomotive e Basic.
   Il nero non e' una rottura decorativa: e' dove sta il lavoro, perche' un
   video su fondo nero si vede e su fondo grigio no.
   ========================================================================= */

body.hl-carta .hl-sec {
  position: relative;
  z-index: var(--hl-z-content);
  padding-block: var(--hl-section-y);
}

body.hl-carta .hl-sec--tight { padding-block: var(--hl-section-y-tight); }
body.hl-carta .hl-sec--alt   { background: var(--hl-light-2); }
body.hl-carta .hl-sec--sheet { background: var(--hl-sheet); }

body.hl-carta .hl-sec--dark {
  background: var(--hl-dark);
  color: var(--hl-paper-fg);
}

/* Filetto fra due sezioni con lo stesso fondo, cosi' il ritmo resta leggibile
   anche senza cambio di colore. */
body.hl-carta .hl-sec + .hl-sec:not(.hl-sec--alt):not(.hl-sec--dark):not(.hl-sec--sheet)::before {
  content: '';
  position: absolute;
  top: 0; left: var(--hl-gutter); right: var(--hl-gutter);
  height: 1px;
  background: var(--hl-rule-soft);
}

/* ---------------------------------------------------------------------------
   HERO DELLA HOME — il ritaglio
   ---------------------------------------------------------------------------
   Il marchio composto a tutta larghezza fa da finestra sul reel. Fuori dalle
   lettere c'e' il fondo della pagina, dentro c'e' il video.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-hero--knock { padding-block: var(--hl-s-10) var(--hl-s-8); }

body.hl-carta .hl-knock {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Rapporto uguale al viewBox: il box e' della forma giusta prima che il
     video arrivi, e la pagina non salta. */
  aspect-ratio: 1000 / 210;
  background: var(--hl-dark);
}

body.hl-carta .hl-knock__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il reel e' un 9:16 esportato dentro un file 16:9 con le bande blu ai
     lati. Ritagliando una fascia orizzontale si inquadrerebbero le bande:
     si ingrandisce perche' dentro le lettere finisca il contenuto vero. */
  transform: scale(1.9);
  transform-origin: center 42%;
}

body.hl-carta .hl-knock__mask {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}

/* La lastra che copre tutto tranne le lettere e' il fondo della pagina. */
body.hl-carta .hl-knock__plate { fill: var(--hl-light); }

/* Il ritaglio si scopre dal basso, una volta sola. */
.hl-js body.hl-carta .hl-knock {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--hl-e-out);
}
.hl-js body.hl-carta .hl-knock.is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .hl-js body.hl-carta .hl-knock { clip-path: none; transition: none; }
}

body.hl-carta .hl-hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--hl-col-gap);
  align-items: end;
  margin-top: var(--hl-s-7);
}

body.hl-carta .hl-hero__claim {
  font-size: var(--hl-fs-display);
  font-weight: 500;
  line-height: var(--hl-lh-display);
  letter-spacing: var(--hl-ls-display);
  color: var(--hl-fg);
  margin: 0;
  max-width: 16ch;
}

body.hl-carta .hl-hero__foot-r {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hl-s-4);
}

body.hl-carta .hl-hero__note {
  margin: 0;
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-fg-mute);
}

@media (max-width: 860px) {
  body.hl-carta .hl-hero__foot { grid-template-columns: minmax(0, 1fr); gap: var(--hl-s-6); }
  body.hl-carta .hl-knock { aspect-ratio: 1000 / 320; }
}

/* ---------------------------------------------------------------------------
   HERO DELLE PAGINE INTERNE
   Etichetta e titolo a sinistra, occhiello e azioni a destra, un filetto
   sotto. Nessuna grafica: sulle pagine interne i siti misurati sono tutti
   silenziosi.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-hero--page {
  padding-block: calc(var(--hl-s-11) + 24px) var(--hl-s-8);
  border-bottom: 1px solid var(--hl-rule);
}

body.hl-carta .hl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--hl-s-6), 5vw, var(--hl-s-9));
  align-items: end;
}

body.hl-carta .hl-hero--page .hl-display { margin-bottom: 0; max-width: 15ch; }
body.hl-carta .hl-hero__aside .hl-lead { margin-bottom: var(--hl-s-5); }
body.hl-carta .hl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hl-s-3); }

@media (max-width: 860px) {
  body.hl-carta .hl-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  body.hl-carta .hl-hero--page { padding-block: var(--hl-s-10) var(--hl-s-7); }
}

/* ---------------------------------------------------------------------------
   TESTATA DI SEZIONE
   ------------------------------------------------------------------------ */
body.hl-carta .hl-band__head { margin-bottom: var(--hl-s-7); max-width: 62ch; }
body.hl-carta .hl-band__head h2 { margin-bottom: var(--hl-s-4); }

/* ---------------------------------------------------------------------------
   MANIFESTO
   ------------------------------------------------------------------------ */
body.hl-carta .hl-manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(var(--hl-s-6), 5vw, var(--hl-s-9));
  align-items: start;
}
body.hl-carta .hl-manifesto__body { max-width: var(--hl-prose-max); }
body.hl-carta .hl-manifesto__body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  body.hl-carta .hl-manifesto__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   PEZZO DI PORTFOLIO
   ------------------------------------------------------------------------ */
body.hl-carta .hl-piece { padding-block: var(--hl-section-y-tight); }

body.hl-carta .hl-piece__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(var(--hl-s-6), 5vw, var(--hl-s-9));
  align-items: center;
}

/* Il numero del pezzo non e' un dettaglio della didascalia: e' la spina del
   portfolio. Contornato e piu' grande dell'etichetta, sta all'inizio della
   riga come i numeri di pagina in un impaginato, e non ruba il colore al
   titolo perche' non ne ha uno pieno. */
body.hl-carta .hl-piece__idx {
  font-variant-numeric: tabular-nums;
  font-size: 2.4em;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--hl-accent-tx);
  margin-right: var(--hl-s-4);
  align-self: baseline;
  transform: translateY(0.06em);
}

/* Se il browser non sa contornare il testo, il numero resta pieno: meglio
   massiccio che invisibile. */
@supports not (-webkit-text-stroke: 1px currentColor) {
  body.hl-carta .hl-piece__idx { color: var(--hl-accent-tx); }
}

/* L'etichetta del pezzo porta il numero, quindi il filetto dell'etichetta
   generica qui e' di troppo: due segni prima della stessa parola. */
body.hl-carta .hl-piece .hl-label::before { display: none; }

body.hl-carta .hl-piece__body {
  max-width: var(--hl-prose-max);
  font-size: var(--hl-fs-lead);
  line-height: var(--hl-lh-lead);
}

body.hl-carta .hl-piece__stack { display: flex; flex-direction: column; gap: var(--hl-s-3); }

body.hl-carta .hl-piece__caption {
  display: flex;
  flex-direction: column;
  gap: var(--hl-s-1);
  margin: var(--hl-s-4) 0 0;
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  line-height: 1.7;
  color: var(--hl-fg-mute);
}

body.hl-carta .hl-piece__credit { color: var(--hl-fg-mute); }

@media (min-width: 981px) {
  body.hl-carta .hl-piece--flip .hl-piece__text  { order: 2; }
  body.hl-carta .hl-piece--flip .hl-piece__media { order: 1; }
}
@media (max-width: 980px) {
  body.hl-carta .hl-piece__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   PRECISAZIONE
   ------------------------------------------------------------------------ */
body.hl-carta .hl-disclosure .hl-manifesto__body {
  border-left: 2px solid var(--hl-accent);
  padding-left: var(--hl-s-6);
}

/* ---------------------------------------------------------------------------
   BANDA DI CHIUSURA
   Sta sul nero: e' l'ultima cosa che si vede.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-cta-band {
  background: var(--hl-dark);
  color: var(--hl-paper-fg);
}

body.hl-carta .hl-cta-band__inner { display: grid; gap: var(--hl-s-2); max-width: 48ch; }
body.hl-carta .hl-cta-band__title { font-size: var(--hl-fs-h1); margin-bottom: var(--hl-s-5); }
body.hl-carta .hl-cta-band .hl-hero__actions { margin-top: var(--hl-s-2); }

/* ---------------------------------------------------------------------------
   FAQ — accordion Divi rivestito
   ------------------------------------------------------------------------ */
body.hl-carta .hl-faq .et_pb_toggle {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hl-rule);
  border-radius: 0;
  padding: var(--hl-s-5) 0;
  margin: 0;
}
body.hl-carta .hl-faq .et_pb_toggle:last-child { border-bottom: 1px solid var(--hl-rule); }

body.hl-carta .hl-faq .et_pb_toggle_title {
  font-family: var(--hl-font-sans);
  font-weight: 500;
  font-size: var(--hl-fs-h3);
  line-height: var(--hl-lh-heading);
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
  padding: 0 var(--hl-s-7) 0 0;
  cursor: pointer;
}

body.hl-carta .hl-faq .et_pb_toggle_content {
  padding: var(--hl-s-4) 0 0;
  color: var(--hl-fg-dim);
  max-width: var(--hl-prose-max);
}

/* ---------------------------------------------------------------------------
   PONTE DIVI
   La riga che ospita il ritaglio va a piena larghezza e senza margini.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-hero__band.et_pb_row {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
body.hl-carta .hl-hero__band .et_pb_column,
body.hl-carta .hl-hero__band .et_pb_module,
body.hl-carta .hl-hero__band .et_pb_code_inner { margin: 0; width: 100%; }

/* ---------------------------------------------------------------------------
   SALTO AL CONTENUTO
   Nascosto finche' non riceve il fuoco, non rimosso.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-skip {
  position: absolute;
  left: var(--hl-s-4);
  top: var(--hl-s-4);
  z-index: var(--hl-z-overlay);
  transform: translateY(-200%);
  background: var(--hl-violet);
  color: #fff;
  padding: var(--hl-s-3) var(--hl-s-5);
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  transition: transform var(--hl-d-ui) var(--hl-e-out);
}
body.hl-carta .hl-skip:focus { transform: none; }

/* Divi mette padding verticale su ogni riga: sotto al ritaglio diventava un
   buco di centoventi pixel fra il marchio e la frase. */
body.hl-carta .hl-hero__foot.et_pb_row,
body.hl-carta .hl-hero__grid.et_pb_row,
body.hl-carta .hl-manifesto__grid.et_pb_row,
body.hl-carta .hl-piece__grid.et_pb_row { padding-block: 0; }

body.hl-carta .hl-hero--knock { padding-block: var(--hl-s-9) var(--hl-s-9); }
body.hl-carta .hl-hero__foot { margin-top: var(--hl-s-6); }

/* Divi somma il proprio padding di riga a quello della sezione: fra due
   sezioni si arrivava a duecentosettanta pixel di vuoto. Il ritmo lo decide
   la sezione, la riga non aggiunge niente. */
body.hl-carta .hl-sec > .et_pb_row { padding-block: 0; }