:root {
  --fondo: #ffffff;
  --inchiostro: #191817;
  --grigio: #8c8780;
  --puntini: #b9b3aa;
  --accento: #c4472b;
  --carta: #fbf8f2;
  --bordo-carta: #e7e1d6;
  --rotolo-chiaro: #fffdf8;
  --rotolo-scuro: #d9d1c3;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.note {
  position: relative;
  width: min(560px, 100%);
  text-align: left;
}

.note__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grigio);
  margin-bottom: clamp(44px, 9vh, 58px);
}

.note__text {
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: clamp(22px, min(5.6vw, 6.4vh), 36px);
  line-height: 1.5;
  font-weight: 380;
  letter-spacing: -0.005em;
}

.note__hint {
  margin-top: clamp(18px, 4vh, 30px);
  font-size: 12px;
  color: var(--grigio);
}

/* the dotted word: a button that looks like the text it sits in */
.term {
  position: relative;
  display: inline-block;
  font: inherit;
  line-height: 1.2;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  /* the dotted line under the word is a fine dashed stroke, not dots */
  background-image: linear-gradient(to right, var(--puntini) 0 3px, transparent 3px 6px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: 0 calc(100% - 0.08em);
  -webkit-tap-highlight-color: transparent;
}
.term.is-on {
  background-image: linear-gradient(to right, var(--accento) 0 100%);
  background-size: var(--linea, 0%) 1px;
  background-repeat: no-repeat;
}
.term:focus-visible { outline: 1px solid var(--accento); outline-offset: 4px; border-radius: 2px; }

/* the tooltip's text lives here for screen readers; what you see is the ribbon */
.tip-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the ribbon: a strip of paper, its roll and the little tip pointing at the word */
.ribbon {
  position: absolute;
  left: 0; top: 0;
  height: 30px;
  pointer-events: none;
  visibility: hidden;
  z-index: 2;
}

.ribbon__strip {
  position: absolute;
  inset: 0 auto 0 0;
  height: 30px;
  background: var(--carta);
  border: 1px solid var(--bordo-carta);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(40, 30, 20, 0.05), 0 4px 10px -6px rgba(40, 30, 20, 0.18);
  overflow: hidden;
  white-space: nowrap;
}
.ribbon__strip::after {
  /* a faint crease where the paper was rolled: it fades as the strip lies flat */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to right, transparent 0 22px, rgba(60, 45, 30, var(--pieghe, 0.05)) 22px 23px);
  pointer-events: none;
}

.ribbon__words {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1;
  color: var(--inchiostro);
  letter-spacing: 0.005em;
}

.ribbon__tip {
  position: absolute;
  top: 100%;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--bordo-carta);
  margin-top: -1px;
}
.ribbon__tip::after {
  content: '';
  position: absolute;
  left: -4px; top: -7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--carta);
}

/* the roll: a tiny cylinder of paper, lit from above-left, that runs ahead of the strip as it opens */
.ribbon__roll {
  position: absolute;
  top: -2px;
  width: 9px;
  height: 34px;
  border-radius: 4.5px;
  background:
    linear-gradient(to right, var(--rotolo-scuro), var(--rotolo-chiaro) 35%, var(--rotolo-chiaro) 50%, var(--rotolo-scuro));
  box-shadow: 1px 2px 3px -1px rgba(40, 30, 20, 0.28), inset 0 0 0 1px rgba(120, 100, 80, 0.12);
  overflow: hidden;
}
.ribbon__roll::before {
  /* the turns of paper on the roll: they slide as it turns */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(120, 100, 80, 0.14) 3px 4px);
  transform: translateY(var(--giro, 0px));
}

/* the soft shadow the roll throws on the paper just behind it */
.ribbon__curl {
  position: absolute;
  top: 0;
  width: 14px;
  height: 30px;
  background: linear-gradient(to left, rgba(60, 45, 30, 0.12), transparent);
}

@media (hover: hover) {
  .term:hover { color: var(--inchiostro); }
}

@media (max-width: 520px) {
  .note__text { line-height: 1.55; }
  .ribbon__words { font-size: 12px; }
}