@font-face {
  font-family: "Torpedo";
  src: url("../assets/font/Torpedo.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Blocco Type Tester */
.project-hero.type-tester,
.type-tester {
  position: relative;
  width: 100%;
  background-color: #000000;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  margin-inline: 0;
  width: 100%;
}

.type-tester__prompt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  padding: 0 5px;
  margin-bottom: 8px;
}

.type-tester__inner {
  width: 100%;
  height: 100%;
  min-height: 480px;
  padding: 60px;
  box-sizing: border-box;
  overflow-y: auto;
  font-family: "Torpedo", sans-serif;
  color: #e91d1b;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.15;
  outline: none;
  cursor: text;
}

.type-tester__inner:empty::before {
  content: attr(data-placeholder);
  color: rgba(233, 29, 27, 0.35);
  pointer-events: none;
}

.type-tester__shuffle{
  color: #000000;
  scale: 110%;
}

/* Adattamento Mobile */
@media (max-width: 860px) {
  .project-hero.type-tester,
  .type-tester {
    height: 300px;
    background-color: #000000 !important; /* Mai bianco sotto */
    /* Sovradimensiona impercettibilmente lo sfondo per coprire i subpixel sul perimetro */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
    margin-inline: 0;
    width: 100%;
  }

  .type-tester__inner {
    min-height: unset;
    height: 100%;
    padding: 24px;
    font-size: clamp(1.6rem, 7vw, 2.8rem);
  }
}