/* Arcalis · sistema di marca 1.0 · base
   Richiede tokens.v2.css. Da copiare su arcalis.legal e arcalis.tech. */

/* Font self-hosted, solo latino e solo i pesi usati */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin.v1.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-400-latin.v1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fallback con metriche adattate, per ridurre lo spostamento al cambio font */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 100.8%;
  ascent-override: 87.1%;
  descent-override: 20.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo Title Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 800;
  size-adjust: 82.8%;
  ascent-override: 106%;
  descent-override: 25.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 95.1%;
  ascent-override: 77.3%;
  descent-override: 27.9%;
  line-gap-override: 0%;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s3);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--leading);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

p {
  max-width: var(--measure);
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* Focus visibile su ogni sfondo: l'anello usa il colore del testo */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

/* Titoli: madre in Archivo condensato 800, Tech in Archivo 700, Legal in Newsreader 400 */
.title-mother {
  font-family: var(--font-title);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.title-tech {
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

.title-legal {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}

/* Forma: un solo angolo arrotondato, in alto a destra */
.corner-lg {
  border-top-right-radius: var(--corner-lg);
}

.corner-md {
  border-top-right-radius: var(--corner-md);
}

.corner-sm {
  border-top-right-radius: var(--corner-sm);
}

/* Superfici */
.surface-ink {
  background: var(--ink);
  color: var(--paper);
}

.surface-white {
  background: var(--white);
  color: var(--ink);
}

.surface-sage {
  background: var(--sage);
  color: var(--ink);
}

/* Etichetta */
.label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Pulsante principale: target minimo 48 px, angolo da 12 px */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  background: var(--paper);
  color: var(--ink);
}

.btn--on-ink {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.btn--on-ink:hover {
  background: var(--ink);
  color: var(--paper);
}

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

/* Collegamento "salta al contenuto" */
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 12px 16px;
  min-height: 44px;
  background: var(--white);
  color: var(--ink);
  font-weight: 500;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* Griglia: 4 colonne su mobile, 12 da 768 px */
.container {
  width: min(100% - 2 * var(--margin), var(--max));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}