/* Hallmark · genre: editorial · macrostructure: Catalogue · theme: custom "quaderno a quadretti"
 * tone: pratico, caldo, da quaderno · anchor hue: 27 (penna rossa) su inchiostro blu 262
 * enrichment: none (anteprime reali delle schede) · nav: N9 Edge-aligned · footer: Ft2 Inline-rule
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 * Tutti i colori e i caratteri vengono da /tokens.css.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-color: var(--color-ink-2) var(--color-paper-2); accent-color: var(--color-accent); }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--color-ink);
  background-color: var(--color-paper);
  /* quadretti da 5 mm */
  background-image:
    linear-gradient(var(--color-grid) var(--rule-hair), transparent var(--rule-hair)),
    linear-gradient(90deg, var(--color-grid) var(--rule-hair), transparent var(--rule-hair));
  background-size: var(--grid-step) var(--grid-step);
  font: 400 var(--text-base)/1.6 var(--font-body);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--color-accent); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--color-highlight); color: var(--color-on-highlight); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}
p, ul, ol, dl { margin: 0; }

.salta {
  position: absolute; left: var(--space-md); top: -100px;
  background: var(--color-ink); color: var(--color-on-ink);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); z-index: 2;
}
.salta:focus { top: var(--space-md); }

/* Pagina con il margine rosso del quaderno */
.pagina {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  position: relative;
}
.pagina::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--page-gutter) / 2);
  border-left: 2px solid var(--color-margin);
  pointer-events: none;
}

/* N9 — marchio a sinistra, un solo link a destra */
.testata {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2xs) var(--space-md);
  padding: var(--space-lg) 0;
}
.marchio {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-md);
  letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
}
.marchio span {
  background: linear-gradient(transparent 14%, var(--color-highlight) 14%, var(--color-highlight) 94%, transparent 94%);
  color: var(--color-on-highlight);
  padding: 0 0.1em;
}
@media (max-width: 25rem) {
  .marchio { font-size: var(--text-base); }
}
.testata-link {
  font-weight: 700; font-size: var(--text-sm); white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Apertura del catalogo */
.apertura { padding: var(--space-2xl) 0 var(--space-xl); max-width: 52rem; }
.apertura h1 { font-size: var(--text-display); }
.apertura h1 .rosso { color: var(--color-accent); }
.inventario {
  margin-top: var(--space-md);
  font-size: var(--text-sm); color: var(--color-ink-2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.apertura .lead { margin-top: var(--space-lg); max-width: var(--measure); font-size: var(--text-md); line-height: 1.5; }

/* Fascia di materia */
.materia { margin-top: var(--space-2xl); }
.materia-testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  border-top: 2px solid var(--color-ink);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.materia-testa h2 { font-size: var(--text-lg); }
.materia-testa p { font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

.catalogo {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-2xl) var(--space-xl);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.voce { display: flex; flex-direction: column; min-width: 0; }

/* Il foglio: l'anteprima posata sul quaderno */
.foglio {
  margin: 0 0 var(--space-lg);
  background: var(--color-sheet);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 var(--color-shadow), 0 14px 28px -18px var(--color-shadow);
  transform: rotate(-0.8deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.voce:nth-child(even) .foglio { transform: rotate(0.7deg); }
.foglio img { width: 100%; aspect-ratio: 331 / 468; border-radius: var(--radius-sm); }
.voce:hover .foglio, .voce:focus-within .foglio { transform: rotate(0deg) translateY(-3px); }

.voce h3 { font-size: var(--text-lg); }
.voce h3 a { text-decoration: none; }
.voce h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.voce .descr { margin-top: var(--space-xs); color: var(--color-ink-2); }
.formato {
  margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.azioni { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  background: var(--color-ink); color: var(--color-on-ink);
  font: 700 var(--text-base)/1 var(--font-body);
  text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { box-shadow: 0 0 0 3px var(--color-highlight); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.link-dettagli {
  font-weight: 700; font-size: var(--text-sm); white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Come sono fatte */
.come {
  margin-top: var(--space-4xl);
  padding: var(--space-xl) 0 0;
  border-top: 2px solid var(--color-ink);
  display: grid; gap: var(--space-xl);
}
.come h2 { font-size: var(--text-xl); max-width: 18ch; }
.come dl { display: grid; gap: var(--space-lg); }
.come dt { font-weight: 700; }
.come dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); max-width: var(--measure); }
.come .nota-ai {
  max-width: var(--measure); padding: var(--space-md) var(--space-lg);
  background: var(--color-paper-2); border-radius: var(--radius-md);
}
@media (min-width: 52rem) {
  .come { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-3xl); }
  .come .nota-ai { grid-column: 2; }
}

/* Pagina della singola scheda */
.briciole { padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.briciole a { font-weight: 700; color: var(--color-ink); }
.scheda {
  display: grid; gap: var(--space-2xl);
  padding: var(--space-xl) 0 var(--space-2xl);
}
.scheda .foglio { max-width: 22rem; margin: 0; }
.scheda h1 { font-size: var(--text-display); }
.scheda .lead { margin-top: var(--space-md); font-size: var(--text-md); line-height: 1.5; max-width: var(--measure); }
.scheda .scarica { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.scheda .scarica p { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.blocco { margin-top: var(--space-2xl); max-width: var(--measure); }
.blocco h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.blocco ul { padding-left: 1.2em; display: grid; gap: var(--space-xs); }
.blocco li::marker { color: var(--color-accent); }
.nota { margin-top: var(--space-2xl); max-width: var(--measure); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 52rem) {
  .scheda { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); align-items: start; }
  .scheda .foglio-wrap { position: sticky; top: var(--space-xl); order: 0; }
}

.altre { border-top: 2px solid var(--color-ink); padding: var(--space-sm) 0 var(--space-2xl); }
.altre h2 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.altre ul { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.altre a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* Documento (privacy) */
.documento { padding: var(--space-xl) 0 var(--space-3xl); max-width: var(--measure); }
.documento h1 { font-size: var(--text-xl); }
.documento .sotto { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.documento h2 { font-size: var(--text-md); margin: var(--space-xl) 0 var(--space-xs); }
.documento p + p { margin-top: var(--space-md); }

/* Ft2 — una riga, filetto sopra */
.piede {
  margin-top: var(--space-3xl);
  border-top: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-lg) 0 var(--space-2xl);
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.piede p { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }
.piede a { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .foglio, .voce:nth-child(even) .foglio, .btn { transition: none; }
  .voce:hover .foglio, .voce:focus-within .foglio { transform: rotate(-0.8deg); }
  .voce:nth-child(even):hover .foglio, .voce:nth-child(even):focus-within .foglio { transform: rotate(0.7deg); }
}

@media print {
  body { background: none; }
  .pagina::before, .testata-link, .azioni, .scarica .btn { display: none; }
}