:root {
  --fondo: #000000;
  --inchiostro: #f4f1ea;
  --contorno: #3a3936;
  --vuoto: #cfcac2;
  --grigio: #8a8781;
  --accento: #ff4a3d;
  --altezza: clamp(54px, 9vh, 66px);
  --corpo: clamp(19px, 2.6vh + 0.6vw, 25px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 16px;
}

.hold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.6vh, 22px);
}

/* the pill: GSAP moves its width (to close into a circle) and a scale/x on the inner frame */
.hold__btn {
  position: relative;
  height: var(--altezza);
  padding: 0 calc(var(--altezza) * 0.52);
  border: 1px solid var(--contorno);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 0.3s ease;
}

.hold__btn:focus { outline: none; }
.hold__btn:focus-visible { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px var(--grigio); }

@media (hover: hover) {
  .hold__btn:hover { border-color: #5a5853; }
}

.hold__words {
  display: inline-flex;
  white-space: pre;
  font-size: var(--corpo);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* one letter: the outline underneath, the solid on top, clipped from the top as it drains (--e from 0 to 1) */
.sp { display: inline-block; font-variation-settings: 'wght' 620; }

.ch {
  position: relative;
  display: inline-block;
  font-variation-settings: 'wght' var(--w, 620), 'wdth' var(--wd, 100);
}

.ch__out {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--tratto, var(--vuoto));
  paint-order: stroke fill;
}

.ch__in {
  position: absolute;
  inset: 0;
  color: var(--inchiostro);
  /* the ink of a capital sits between about 10% and 84% of the line box: the drain runs only across the ink */
  clip-path: inset(calc((var(--ink-top, 0.1) + var(--ink-h, 0.74) * var(--e, 0)) * 100%) 0 0 0);
}

/* the line where the solid meets the empty part, a hairline that follows the drain */
.ch__in::after {
  content: '';
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  top: calc((var(--ink-top, 0.1) + var(--ink-h, 0.74) * var(--e, 0)) * 100%);
  height: 1px;
  background: var(--accento);
  opacity: var(--filo, 0);
}

.hold__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: var(--accento);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hold__note {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grigio);
  font-variation-settings: 'wght' 460, 'wdth' 108;
  min-height: 1.2em;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}