/* The tooltip that rises from the word: a sentence on a white page, four words underlined in ink, and the ink that
   swells into a tooltip. */
:root {
  --page: #ffffff;          /* the page */
  --text: #1d1b22;          /* the words of the sentence */
  --ink: #2638c9;           /* the ink: the words explained, their underline and the tooltip */
  --on-ink: #ffffff;        /* the words on the ink */
  --shade: rgba(24, 32, 130, 0.24);   /* the shadow the ink casts */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: 'Source Serif 4 Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

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

/* the sentence and the room the tooltips rise into, above and below it */
.gloss {
  position: relative;
  max-width: 100%;
  padding: 78px 0;
}

.gloss__text {
  position: relative;
  max-width: 20em;
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- the ink */
/* the underlines, the swelling round the words, the necks and the tooltips' bodies: painted by the script */
.gloss__ink {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px var(--shade)) drop-shadow(0 1px 2px var(--shade));
}

/* the underlines cast no shadow */
.gloss__ink--lines {
  filter: none;
}

.gloss__ink path {
  fill: var(--ink);
}

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

/* the word is painted with a gradient cut to its letters: white as high as the ink has risen, ink above it */
.term__word {
  --p: 0%;
  --on: var(--on-ink);
  background-image: linear-gradient(to top, var(--on) var(--p), var(--ink) var(--p));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

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

/* the word in use stands over the ink */
.term.is-up {
  z-index: 2;
}

.term:focus {
  outline: none;
}

/* with the tooltip out, the ink round the word shows the focus; after Esc, a ring */
.term:focus-visible:not(.is-up) .term__word {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
  border-radius: 9px;
}

/* ---------------------------------------------------------------- the tooltips' words */
/* placed by the script on the body the ink makes; it is also what the pointer can rest on */
.tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  max-width: 216px;
  padding: 9px 12px;
  color: var(--on-ink);
  font: 500 13px/18px 'Instrument Sans Variable', system-ui, sans-serif;
  letter-spacing: 0.005em;
  text-wrap: balance;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 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;
  }
}

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

  .gloss__text {
    font-size: 20px;
    line-height: 1.6;
  }
}