/* ============================================================================
   HOMO LAPIS 2026 — BASE
   Reset mirato, tipografia, griglia, ingressi.
   ========================================================================= */

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

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

body.hl-carta {
  margin: 0;
  background: var(--hl-light);
  color: var(--hl-ink);
  font-family: var(--hl-font-sans);
  font-size: var(--hl-fs-body);
  line-height: var(--hl-lh-body);
  letter-spacing: var(--hl-ls-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

body.hl-carta img,
body.hl-carta svg,
body.hl-carta video,
body.hl-carta canvas { max-width: 100%; display: block; }

/* ---------------------------------------------------------------------------
   TIPOGRAFIA
   Un grotesque per tutto. La gerarchia si fa con corpo e colore, non con
   quattro famiglie diverse.
   ------------------------------------------------------------------------ */

body.hl-carta h1, body.hl-carta h2, body.hl-carta h3,
body.hl-carta h4, body.hl-carta h5, body.hl-carta h6 {
  font-family: var(--hl-font-sans);
  font-weight: 500;
  line-height: var(--hl-lh-heading);
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
  margin: 0 0 var(--hl-s-4);
  text-wrap: balance;
}

body.hl-carta h1 { font-size: var(--hl-fs-h1); line-height: var(--hl-lh-display); letter-spacing: var(--hl-ls-display); }
body.hl-carta h2 { font-size: var(--hl-fs-h2); }
body.hl-carta h3 { font-size: var(--hl-fs-h3); }
body.hl-carta h4 { font-size: var(--hl-fs-h4); }

/* Il serif appare in corsivo, una parola per volta. E' l'unico accento
   tipografico del sistema: se compare due volte nella stessa schermata ha
   gia' smesso di essere un accento. */
body.hl-carta h1 em, body.hl-carta h2 em, body.hl-carta h3 em,
body.hl-carta .hl-display em, body.hl-carta .hl-hero__claim em,
body.hl-carta .hl-quote em {
  font-family: var(--hl-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

body.hl-carta p {
  margin: 0 0 var(--hl-s-4);
  color: var(--hl-fg-dim);
  text-wrap: pretty;
}

body.hl-carta a { color: inherit; text-decoration: none; }
body.hl-carta strong { font-weight: 600; color: var(--hl-fg); }

body.hl-carta ::selection { background: var(--hl-violet); color: #fff; }

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

body.hl-carta .hl-lead {
  font-size: var(--hl-fs-lead);
  line-height: var(--hl-lh-lead);
  color: var(--hl-fg-dim);
  max-width: 54ch;
  margin: 0 0 var(--hl-s-6);
}

/* L'etichetta tecnica: mono, maiuscola, spaziata. Sta nei margini e nei
   sopratitoli, e non e' mai il titolo. */
body.hl-carta .hl-label {
  font-family: var(--hl-font-mono);
  font-weight: 500;
  font-size: var(--hl-fs-label);
  line-height: 1.2;
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-fg-mute);
  margin: 0 0 var(--hl-s-4);
  display: flex;
  align-items: center;
  gap: var(--hl-s-3);
}

body.hl-carta .hl-label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--hl-accent);
  flex: none;
}

body.hl-carta .hl-label--plain::before { display: none; }

body.hl-carta .hl-note {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  line-height: 1.7;
  color: var(--hl-fg-mute);
  max-width: 60ch;
}

body.hl-carta .hl-quote {
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
  margin: 0 0 var(--hl-s-5);
}

/* ---------------------------------------------------------------------------
   GRIGLIA
   ------------------------------------------------------------------------ */
body.hl-carta .hl-wrap {
  width: 100%;
  max-width: var(--hl-content-max);
  margin-inline: auto;
  padding-inline: var(--hl-gutter);
}

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

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

body.hl-carta .hl-rule {
  height: 1px; background: var(--hl-rule);
  border: 0; margin: 0; width: 100%;
}

body.hl-carta .hl-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.hl-carta [hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   INGRESSI
   Due movimenti soli, e sono quelli che usano davvero i siti misurati: il
   testo sale di poco e si scopre, i media si scoprono da sotto con una
   maschera. Nessun campo di particelle, nessun respiro infinito.
   ------------------------------------------------------------------------ */
.hl-js body.hl-carta [data-hl-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--hl-d-reveal) var(--hl-e-out),
    transform var(--hl-d-reveal) var(--hl-e-out);
  transition-delay: var(--hl-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.hl-js body.hl-carta [data-hl-reveal="fade"] { transform: none; }

.hl-js body.hl-carta [data-hl-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.hl-js body.hl-carta .hl-reveal-lines .hl-line-inner {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 900ms var(--hl-e-out);
  transition-delay: var(--hl-reveal-delay, 0ms);
}
.hl-js body.hl-carta .hl-reveal-lines .hl-line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hl-js body.hl-carta .hl-reveal-lines.is-revealed .hl-line-inner { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl-js body.hl-carta [data-hl-reveal],
  .hl-js body.hl-carta .hl-reveal-lines .hl-line-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.hl-carta *, body.hl-carta *::before, body.hl-carta *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   IL SEGNO
   ---------------------------------------------------------------------------
   L'accento in corsivo prende una sottolineatura disegnata: un tratto solo,
   che sale appena da sinistra a destra e si ingrossa a meta', con le punte
   smussate come le lascia una matita che parte e si stacca.

   E' l'unica cosa in pagina che non e' ne' tipografia ne' fotografia, e
   compare una volta sola per pagina — la stessa disciplina del corsivo, che
   e' quello a cui e' attaccata. Il tratto e' una maschera, non un colore:
   cosi' prende --hl-accent e si ribalta da solo sulle sezioni scure.
   ------------------------------------------------------------------------ */
body.hl-carta h1 em, body.hl-carta h2 em, body.hl-carta h3 em,
body.hl-carta .hl-display em, body.hl-carta .hl-hero__claim em,
body.hl-carta .hl-quote em { position: relative; }

body.hl-carta h1 em::after, body.hl-carta h2 em::after,
body.hl-carta h3 em::after, body.hl-carta .hl-display em::after,
body.hl-carta .hl-hero__claim em::after, body.hl-carta .hl-quote em::after {
  content: '';
  position: absolute;
  left: -0.03em;
  right: -0.05em;
  bottom: -0.055em;
  height: 0.155em;
  background: var(--hl-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 12%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23000%22 d=%22M3.5 7.2C48 5.2 104 3.6 152 3C182 2.65 204 2.5 216.3 2.6C217.5 2.65 218.1 3.1 218 3.9C217.9 4.7 217.2 5.3 216 5.4C204 5.5 182 5.9 152 6.6C104 7.7 48 9 4.2 10C3 10.1 2.3 9.8 2.35 9.2C2.4 8.4 2.8 7.5 3.5 7.2Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 12%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23000%22 d=%22M3.5 7.2C48 5.2 104 3.6 152 3C182 2.65 204 2.5 216.3 2.6C217.5 2.65 218.1 3.1 218 3.9C217.9 4.7 217.2 5.3 216 5.4C204 5.5 182 5.9 152 6.6C104 7.7 48 9 4.2 10C3 10.1 2.3 9.8 2.35 9.2C2.4 8.4 2.8 7.5 3.5 7.2Z%22/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* Quando il corsivo va a capo lo splitter lascia un <em> per riga. Il segno
   pero' e' uno solo: lo tiene il primo frammento, gli altri lo spengono. */
body.hl-carta em.hl-em--cont::after { content: none; }

/* Il tratto si tira da sinistra, una volta sola, dopo il titolo. Il ritardo
   e' quello dell'ultima riga del titolo: prima entra la parola, poi il segno. */
.hl-js body.hl-carta [data-hl-split] em::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 620ms var(--hl-e-out) 520ms;
}
.hl-js body.hl-carta [data-hl-split].is-revealed em::after { clip-path: inset(0 -2% 0 0); }

@media (prefers-reduced-motion: reduce) {
  .hl-js body.hl-carta [data-hl-split] em::after {
    clip-path: none !important;
    transition: none !important;
  }
}