/* ============================================================================
   HOMO LAPIS 2026 — COMPONENTI
   Angoli vivi sulle superfici. La pillola solo sui controlli.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   MARCHIO
   Il lockup originale: HOMO · testa · LAPIS. Lato Light maiuscolo, spaziatura
   0,19em — il valore misurato sul file del 2022, non un'approssimazione a
   occhio. Viola sulla prima parola, rosso sulla seconda: sono le due lastre.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-logo {
  display: inline-flex;
  align-items: center;
  /* Lo stacco fra segno e parola e' quello dell'originale: 0,8 volte
     l'altezza delle maiuscole, che in Lato vale 0,56em. */
  gap: 0.56em;
  /* Il sito parla in Inter Tight, il marchio no: il lockup Homo Lapis e' Lato
     Light dal 2022 e resta quello. E' l'unica cosa in pagina composta in Lato. */
  font-family: "Lato", var(--hl-font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1;
  letter-spacing: var(--hl-ls-wordmark);
  text-transform: uppercase;
  white-space: nowrap;
}

body.hl-carta .hl-logo__words { display: inline-flex; gap: 0.5em; }

/* La spaziatura aggiunge spazio anche dopo l'ultima lettera: si recupera,
   altrimenti la parola sembra scentrata rispetto al segno. */
body.hl-carta .hl-logo__word { margin-right: calc(var(--hl-ls-wordmark) * -1); }
body.hl-carta .hl-logo__word--a { color: var(--hl-violet); }
body.hl-carta .hl-logo__word--b { color: var(--hl-red-deep); }

body.hl-carta .hl-logo__mark {
  /* Nell'originale il segno e' alto 3,37 volte l'altezza delle maiuscole, e in
     Lato le maiuscole misurano 0,705em: 3,37 x 0,705 = 2,38em. */
  height: 2.38em;
  width: auto;
  flex: none;
}

body.hl-carta .hl-on-dark .hl-logo__word--a { color: var(--hl-violet-lt); }
body.hl-carta .hl-on-dark .hl-logo__word--b { color: #f0736c; }

/* ---------------------------------------------------------------------------
   AZIONI
   Un solo bottone a pillola in tutto il sistema: il primario. Il secondario e'
   un rettangolo con filetto, e il terziario e' solo testo con sottolineatura
   che si disegna.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-s-3);
  padding: 13px 24px;
  border: 1px solid var(--hl-rule-strong);
  border-radius: var(--hl-r-none);
  background: transparent;
  color: var(--hl-fg);
  font-family: var(--hl-font-mono);
  font-weight: 500;
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--hl-d-ui) var(--hl-e-ui),
    color var(--hl-d-ui) var(--hl-e-ui),
    border-color var(--hl-d-ui) var(--hl-e-ui);
}

body.hl-carta .hl-btn:hover,
body.hl-carta .hl-btn:focus-visible {
  background: var(--hl-ink);
  border-color: var(--hl-ink);
  color: var(--hl-light);
}

body.hl-carta .hl-btn--primary {
  border-radius: var(--hl-r-pill);
  padding: 14px 26px;
  background: var(--hl-violet);
  border-color: var(--hl-violet);
  color: #fff;
}

body.hl-carta .hl-btn--primary:hover,
body.hl-carta .hl-btn--primary:focus-visible {
  background: var(--hl-violet-deep);
  border-color: var(--hl-violet-deep);
  color: #fff;
}

body.hl-carta .hl-btn--ghost {
  border-color: transparent;
  padding-inline: 0;
  color: var(--hl-accent-tx);
}
body.hl-carta .hl-btn--ghost:hover,
body.hl-carta .hl-btn--ghost:focus-visible {
  background: transparent;
  color: var(--hl-ink);
  border-color: transparent;
}

/* La freccia scorre a destra: e' l'unico movimento sui controlli. */
body.hl-carta .hl-arrow {
  display: inline-block;
  transition: transform var(--hl-d-ui) var(--hl-e-out);
}
body.hl-carta .hl-btn:hover .hl-arrow,
body.hl-carta .hl-btn:focus-visible .hl-arrow { transform: translateX(4px); }

/* La sottolineatura c'e' sempre, tenue, e si accende al passaggio: un link
   dentro un paragrafo deve distinguersi anche da chi non vede il colore. */
body.hl-carta .hl-link {
  color: var(--hl-accent-tx);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--hl-d-ui) var(--hl-e-ui);
}
body.hl-carta .hl-link:hover,
body.hl-carta .hl-link:focus-visible { text-decoration-color: currentColor; }

/* Anche un link senza classe, se sta dentro un blocco di testo. */
/* Solo i link dentro a un blocco di testo: quelli di navigazione e delle
   liste del piede si distinguono gia' per posizione, e sottolinearli tutti
   trasforma il menu in un elenco puntato. */
body.hl-carta p a:not(.hl-btn):not(.hl-link):not(.hl-row__link),
body.hl-carta .hl-check label a:not(.hl-link),
body.hl-carta .hl-prose li a:not(.hl-btn):not(.hl-link),
body.hl-carta .hl-manifesto__body li a:not(.hl-btn):not(.hl-link) {
  color: var(--hl-accent-tx);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------
   ETICHETTE E TARGHE
   ------------------------------------------------------------------------ */
body.hl-carta .hl-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-s-2);
  padding: 4px 10px;
  border: 1px solid var(--hl-rule);
  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);
}

body.hl-carta .hl-tag--live { border-color: var(--hl-rule-strong); color: var(--hl-accent-tx); }
body.hl-carta .hl-tag--live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: var(--hl-r-pill);
  background: var(--hl-violet);
}

/* ---------------------------------------------------------------------------
   SUPERFICI
   Delineate, non sollevate: il foglio bianco sulla carta si stacca con un
   filetto e un velo d'ombra, niente di piu'.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-card {
  position: relative;
  background: var(--hl-surface);
  border: 1px solid var(--hl-rule);
  border-radius: var(--hl-r-none);
  padding: var(--hl-s-6);
  box-shadow: var(--hl-shadow-tile);
  transition: border-color var(--hl-d-ui) var(--hl-e-ui),
              transform var(--hl-d-ui) var(--hl-e-out);
}

body.hl-carta a.hl-card:hover,
body.hl-carta a.hl-card:focus-visible {
  border-color: var(--hl-rule-strong);
  transform: translateY(-2px);
}

body.hl-carta .hl-card h3 { margin-bottom: var(--hl-s-3); }
body.hl-carta .hl-card p:last-child { margin-bottom: 0; }

/* Il numero della scheda: mono, grande, in alto, sopra al titolo. */
body.hl-carta .hl-card__num {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  color: var(--hl-accent);
  margin: 0 0 var(--hl-s-4);
}

/* ---------------------------------------------------------------------------
   INDICE EDITORIALE
   Righe con numero, titolo, occhiello, metadato e freccia. La riga e' un
   filetto: al passaggio si riempie di carta e il numero passa a viola.
   ------------------------------------------------------------------------ */
/* Ogni riga e' un `divi/group` con tre moduli di testo dentro. Divi imposta i
   gruppi a `flex` in colonna: la griglia va ridichiarata, come per le altre
   griglie del sito. */
body.hl-carta .hl-rows.et_pb_group {
  display: block;
  border-top: 1px solid var(--hl-rule);
  background: transparent;
  padding: 0;
}

body.hl-carta .hl-row.et_pb_group {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto 1.5rem;
  align-items: baseline;
  gap: var(--hl-s-5);
  padding: var(--hl-s-6) var(--hl-s-4);
  border-bottom: 1px solid var(--hl-rule);
  background: transparent;
  color: var(--hl-fg);
  transition: background var(--hl-d-ui) var(--hl-e-ui),
              color var(--hl-d-ui) var(--hl-e-ui);
}

body.hl-carta .hl-row .hl-row__cell { margin: 0; }
/* Divi mette `padding-bottom: 1em` sui paragrafi dentro i moduli di testo:
   nella riga indice diventa uno stacco che l'originale non aveva. */
body.hl-carta .hl-row .hl-row__cell .et_pb_text_inner p,
body.hl-carta .hl-row .hl-row__cell p {
  margin: 0;
  padding-bottom: 0;
}
body.hl-carta .hl-row .hl-row__main .et_pb_text_inner p + p { margin-top: var(--hl-s-2); }

/* La freccia: era uno <span> nel markup, adesso e' la quarta colonna della
   griglia disegnata dallo pseudo-elemento della riga. Compare solo dove c'e'
   una destinazione, perche' una freccia senza link promette una cosa che non
   succede. */
body.hl-carta .hl-row--link::after {
  content: "→";
  align-self: baseline;
  color: var(--hl-fg-mute);
  transition: transform var(--hl-d-ui) var(--hl-e-out),
              color var(--hl-d-ui) var(--hl-e-ui);
}

/* L'ancora sta nel titolo ed e' un <a href> vero; questo la fa arrivare a
   coprire tutta la riga, cosi' il bersaglio resta grande come quando la riga
   intera era un link. */
body.hl-carta .hl-row__link {
  color: inherit;
  text-decoration: none;
}
body.hl-carta .hl-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

body.hl-carta .hl-row--link:hover { background: var(--hl-surface); }
body.hl-carta .hl-row--link:hover::after { transform: translateX(5px); color: var(--hl-accent); }
body.hl-carta .hl-row--link:hover .hl-row__idx { color: var(--hl-accent); }
body.hl-carta .hl-row__link:focus-visible { outline: 2px solid var(--hl-accent); outline-offset: 4px; }

body.hl-carta .hl-row__idx {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  color: var(--hl-fg-mute);
  transition: color var(--hl-d-ui) var(--hl-e-ui);
}

body.hl-carta .hl-row__title,
body.hl-carta .hl-row__title .hl-row__link {
  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);
  /* Dichiarato, non ereditato: dentro un modulo di testo il colore di partenza
     e' quello del corpo, e il titolo verrebbe smorzato. */
  color: var(--hl-fg);
}

body.hl-carta .hl-row__lead {
  font-size: var(--hl-fs-sm);
  line-height: 1.6;
  color: var(--hl-fg-dim);
  max-width: 62ch;
}

body.hl-carta .hl-row__meta {
  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);
  white-space: nowrap;
}

@media (max-width: 780px) {
  body.hl-carta .hl-row.et_pb_group {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.2rem;
    gap: var(--hl-s-4);
    padding: var(--hl-s-5) var(--hl-s-2);
  }
  body.hl-carta .hl-row .hl-row__cell:last-of-type { grid-column: 2; }
}

/* ---------------------------------------------------------------------------
   COPPIE CHIAVE/VALORE
   ------------------------------------------------------------------------ */
/* Ogni coppia e' una `divi/blurb` dentro un `divi/group`: chiave nel titolo,
   valore nel corpo, tutte e due modificabili dal builder. La blurb pero'
   arriva vestita da scheda — fondo, cornice, ombra, sollevamento al passaggio
   — e qui non deve essere una scheda: si spegne tutto e resta la riga. */
body.hl-carta .hl-pairs,
body.hl-carta .hl-pairs .et_pb_group_inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-top: 1px solid var(--hl-rule);
}
body.hl-carta .hl-pairs .et_pb_group_inner { border-top: 0; }

body.hl-carta .hl-pairs .et_pb_blurb.hl-pair,
body.hl-carta .hl-pairs .et_pb_blurb.hl-pair:hover {
  padding: var(--hl-s-5) var(--hl-s-4) var(--hl-s-5) 0;
  border: 0;
  border-bottom: 1px solid var(--hl-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  height: auto;
}
body.hl-carta .hl-pairs .et_pb_blurb.hl-pair::before { content: none; }

body.hl-carta .hl-pairs .hl-pair .et_pb_module_header {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  font-weight: 500;
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-fg-mute);
  margin-bottom: var(--hl-s-2);
}

body.hl-carta .hl-pairs .hl-pair .et_pb_blurb_description p {
  margin: 0;
  font-size: var(--hl-fs-h4);
  line-height: var(--hl-lh-heading);
  color: var(--hl-fg);
}

/* ---------------------------------------------------------------------------
   ELENCHI
   Il segno di elenco e' una crocetta di registro, non un pallino.
   ------------------------------------------------------------------------ */
/* L'elenco e' `divi/icon-list`: ogni voce e' un modulo, e il segno di elenco
   e' una crocetta di registro disegnata al posto dell'icona di Divi. Le regole
   stavano in corsi.css perche' li' era l'unico elenco nativo del sito: adesso
   sono tutti nativi, quindi stanno qui. */
body.hl-carta .hl-ticklist.et_pb_icon_list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.hl-carta .hl-ticklist .et_pb_icon_list_item {
  position: relative;
  display: block;
  padding: var(--hl-s-4) 0 var(--hl-s-4) var(--hl-s-7);
  margin: 0;
  border-bottom: 1px solid var(--hl-rule-soft);
}
body.hl-carta .hl-ticklist .et_pb_icon_list_item:first-child { border-top: 1px solid var(--hl-rule-soft); }

/* L'icona di Divi non serve: il segno lo disegna il foglio. */
body.hl-carta .hl-ticklist .et-pb-icon { display: none !important; }

body.hl-carta .hl-ticklist .et_pb_icon_list_item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--hl-s-4) + 0.55em);
  width: 10px;
  height: 10px;
  background:
    linear-gradient(var(--hl-accent), var(--hl-accent)) 50% 50% / 10px 1px no-repeat,
    linear-gradient(var(--hl-accent), var(--hl-accent)) 50% 50% / 1px 10px no-repeat;
}

body.hl-carta .hl-ticklist .et_pb_icon_list_text {
  font-size: var(--hl-fs-body);
  line-height: var(--hl-lh-body);
  color: var(--hl-fg);
}

/* ---------------------------------------------------------------------------
   NAVIGAZIONE
   Barra sottile su carta. Quando si stacca dal bordo compare il filetto e il
   fondo diventa carta opaca: il contenuto non deve mai trasparire dietro.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--hl-z-nav);
  transition: background var(--hl-d-ui) var(--hl-e-ui),
              border-color var(--hl-d-ui) var(--hl-e-ui);
  border-bottom: 1px solid transparent;
}

body.hl-carta .hl-nav.is-stuck {
  /* Il grigio di pagina, non la carta del sistema precedente. */
  background: rgba(243, 242, 240, 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hl-rule);
}

body.hl-carta .hl-nav__inner {
  max-width: var(--hl-page-max);
  margin-inline: auto;
  padding: var(--hl-s-4) var(--hl-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hl-s-6);
}

body.hl-carta .hl-nav__links {
  display: flex;
  align-items: center;
  gap: var(--hl-s-6);
  list-style: none;
  margin: 0; padding: 0;
}

body.hl-carta .hl-nav__links a {
  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-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--hl-d-ui) var(--hl-e-ui),
              border-color var(--hl-d-ui) var(--hl-e-ui);
}

body.hl-carta .hl-nav__links a:hover,
body.hl-carta .hl-nav__links a:focus-visible,
body.hl-carta .hl-nav__links a[aria-current="page"] {
  color: var(--hl-ink);
  border-bottom-color: var(--hl-violet);
}

body.hl-carta .hl-nav__burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--hl-rule);
  background: transparent;
  cursor: pointer;
  position: relative;
}
body.hl-carta .hl-nav__burger::before,
body.hl-carta .hl-nav__burger::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px;
  height: 1px;
  background: var(--hl-ink);
  transition: transform var(--hl-d-ui) var(--hl-e-ui);
}
body.hl-carta .hl-nav__burger::before { top: 16px; }
body.hl-carta .hl-nav__burger::after  { bottom: 16px; }
body.hl-carta .hl-nav__burger[aria-expanded="true"]::before { transform: translateY(3px) rotate(45deg); }
body.hl-carta .hl-nav__burger[aria-expanded="true"]::after  { transform: translateY(-3px) rotate(-45deg); }

body.hl-carta .hl-nav__panel {
  position: fixed;
  inset: 0;
  z-index: var(--hl-z-overlay);
  background: var(--hl-light);
  padding: calc(var(--hl-s-10)) var(--hl-gutter) var(--hl-s-8);
  display: none;
  flex-direction: column;
  gap: var(--hl-s-2);
  overflow-y: auto;
}
body.hl-carta .hl-nav__panel.is-open { display: flex; }

body.hl-carta .hl-nav__panel a {
  font-family: var(--hl-font-sans);
  font-weight: 500;
  font-size: var(--hl-fs-h2);
  padding: var(--hl-s-3) 0;
  border-bottom: 1px solid var(--hl-rule-soft);
}

@media (max-width: 1024px) {
  body.hl-carta .hl-nav__links,
  body.hl-carta .hl-nav__cta { display: none; }
  body.hl-carta .hl-nav__burger { display: block; }
}

/* ---------------------------------------------------------------------------
   PIEDE
   ------------------------------------------------------------------------ */
body.hl-carta .hl-footer {
  background: var(--hl-light-2);
  border-top: 1px solid var(--hl-rule);
  padding: var(--hl-s-9) 0 var(--hl-s-6);
  position: relative;
}

body.hl-carta .hl-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--hl-col-gap);
}

body.hl-carta .hl-footer h3 {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  font-weight: 500;
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-fg-mute);
  margin-bottom: var(--hl-s-4);
}

body.hl-carta .hl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hl-s-3); }
body.hl-carta .hl-footer a { color: var(--hl-fg-dim); transition: color var(--hl-d-ui) var(--hl-e-ui); }
body.hl-carta .hl-footer a:hover { color: var(--hl-accent-tx); }

body.hl-carta .hl-footer__bottom {
  margin-top: var(--hl-s-8);
  padding-top: var(--hl-s-5);
  border-top: 1px solid var(--hl-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--hl-s-4) var(--hl-s-6);
  justify-content: space-between;
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: 0.08em;
  color: var(--hl-fg-mute);
}

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

/* Nella riga di chiusura del piede il link alla privacy sta in mezzo ad altro
   testo: li' il colore da solo non basta a distinguerlo, e serve il tratto. */
body.hl-carta .hl-footer__bottom a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}
body.hl-carta .hl-footer__bottom a:hover,
body.hl-carta .hl-footer__bottom a:focus-visible { text-decoration-color: currentColor; }

/* Le righe indice non sono sempre link: dove non lo sono, la freccia
   prometteva un click che non succede. */
body.hl-carta div.hl-row > .hl-row__go { visibility: hidden; }