@font-face {
  font-family: "Humane";
  src: url("./assets/fonts/Humane-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("./assets/fonts/AtkinsonHyperlegible-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Humane", "Bebas Neue", "Arial Narrow", sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;

  --c-black:         #0d0b0c;
  --c-orange:        #ec651d;
  --c-white:         #d7d6d5;
  --c-orange-deep:   #c14e12;
  --c-orange-bright: #ff7d33;
  --c-grey:          #999999;

  --bg:        var(--c-black);
  --fg:        var(--c-white);
  --accent:    var(--c-orange);
  --on-accent: var(--c-black);
  --grey:      var(--c-grey);
  --line:      rgba(215, 214, 213, .14);
  --focus:     var(--c-orange-bright);

  --danger: #ff2038;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.3s;
  --dur:      0.6s;

  --grain-opacity: 0.055;
  --grain-speed: 1s;
}

.link-sito {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--grey);
  padding: 10px 4px;
  transition: color var(--dur) var(--ease-out);
}
.link-sito:hover, .link-sito:focus-visible { color: var(--accent); }
.link-sito .freccia { transition: transform var(--dur) var(--ease-out); }
.link-sito:hover .freccia, .link-sito:focus-visible .freccia { transform: translateX(-3px); }

.nota-limite {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey);

  text-align: center;
  margin-top: 10px;
}
.nota-limite b { color: var(--fg); font-weight: 600; }