/* The tooltip with the dimension line: a sentence on a white page, three words dashed underneath like hidden edges,
   and the hairlines of a technical drawing that dimension a word and letter its definition. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141414;           /* the sentence and the definitions */
  --accent: #e5432a;        /* the lines of the drawing, and the letters while they are wet */
  --focus: #e5432a;         /* the ring round a word reached with the keys, once Esc has put its tooltip away */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* the sentence and the room the definitions are lettered in, above and below it */
.gloss {
  position: relative;
  max-width: 100%;
  padding: 84px 0;
}

.gloss__text {
  position: relative;
  max-width: 19em;
  margin: 0;
  font-size: 27px;
  font-weight: 380;
  font-stretch: 100%;
  line-height: 1.5;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- the lines of the drawing */
.gloss__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.gloss__lines path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: butt;
}

/* the ticks at the ends of a dimension line */
.gloss__lines .tick {
  stroke-width: 1.5;
  stroke-linecap: square;
}

/* ---------------------------------------------------------------- the words explained */
.term {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: help;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the weight and the width are written by the script, so the word gets heavier without getting wider */
.term__word {
  display: inline-block;
  white-space: nowrap;
}

/* where the line of letters sits, read by the script */
.term__base {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

.term:focus {
  outline: none;
}

/* with the tooltip out, the lines show the focus; after Esc, a ring */
.term:focus-visible:not(.is-open) .term__word {
  outline: 1px solid var(--focus);
  outline-offset: 5px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- the definitions */
/* lettered like the notes on a drawing: capitals, narrow, a little apart. Placed by the script; the padding on the
   side of the word is an invisible bridge the pointer can cross to rest on the words */
.tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 236px;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 470;
  font-stretch: 84%;
  line-height: 17px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  visibility: hidden;
  pointer-events: none;
}

.tip.is-right {
  text-align: right;
}

.tip.is-open {
  visibility: visible;
}

/* the pointer can rest on it; a finger goes through it, to the word under it */
@media (hover: hover) {
  .tip.is-open {
    pointer-events: auto;
  }
}

/* the words, one span per letter, lettered as the line goes by */
.tip__w {
  display: inline-block;
  white-space: nowrap;
}

.tip__c {
  display: inline-block;
  opacity: 0;
}

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

@media (max-width: 480px) {
  .gloss {
    padding: 92px 0;
  }

  .gloss__text {
    font-size: 21px;
    line-height: 1.55;
  }

  .tip {
    font-size: 11px;
    line-height: 16px;
  }
}