/* Glossary (Fable 3.8): two strips of typed label tape across the head's sheets, the sixteen terms on them as links; a strip
   slides by hand or by the arrow keys (page.js [data-tape]). The entries below: each term on tape, its definition, its source. */
/* 2026-11-06: the strips ran past the band to the screen edge and read as overflow; now each tape is a cut length with two
   visible scissor ends 30u inside the band, and only the typed words slide inside it (the fade is on the words, not the tape).
   Was: margin-right -44u, the tint on the sliding strip, and the fade mask on the whole tape. */
.gl-tapes { position: relative; display: grid; gap: calc(30 * var(--u)); align-self: center; margin: calc(20 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)) 0; z-index: 3;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(7 * var(--u)) rgb(13 22 25 / .16)); }
.gl-tape { position: relative; overflow: hidden; min-width: 0; touch-action: pan-y; cursor: grab; background: rgb(193 213 219 / .72); clip-path: polygon(1.2% 0, 100% 5%, 98.8% 100%, 0 95%); }
.gl-tape__win { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent .8%, #000 4%, #000 96%, transparent 99.2%); mask-image: linear-gradient(90deg, transparent .8%, #000 4%, #000 96%, transparent 99.2%); }
.gl-tape--a { transform: rotate(-4deg); }
.gl-tape--b { transform: rotate(3deg); margin-left: calc(30 * var(--u)); }
.gl-tape__strip { display: flex; align-items: center; gap: calc(10 * var(--u)); width: max-content; padding: calc(9 * var(--u)) calc(24 * var(--u));
  transform: translateX(var(--x, 0px)); transition: transform .5s steps(6, end); }
.gl-tape.is-dragging { cursor: grabbing; }
.gl-tape.is-dragging .gl-tape__strip { transition: none; }
.gl-tape__t { font: 700 calc(11.5 * var(--u)) / 1 Consolas, "Courier New", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-red); text-decoration: none; white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; }
.gl-tape__t:hover { color: var(--hd); }
.gl-tape__t:focus-visible { outline: 2px solid var(--hd); outline-offset: 2px; }
.gl-tape__strip > i { font-style: normal; color: rgb(90 69 17 / .5); }
.gl-note { left: 6%; top: 100%; margin-top: 18px; }
/* the entries */
.gl-group { padding-block: calc(14 * var(--u)); }
.gl-terms { display: grid; }
.gl-terms.pcard { padding: calc(10 * var(--u)) calc(30 * var(--u)); transform: rotate(-.2deg); }
.gl-term { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(30 * var(--u)); padding: calc(20 * var(--u)) 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-h) + 20px); }
.gl-term:first-child { border-top: 0; }
.gl-term dt { align-self: start; }
.gl-term dt .label--tape { font-size: calc(11 * var(--u)); line-height: 1.3; white-space: normal; max-width: 26ch; }
.gl-term:nth-child(2n) dt .label--tape { transform: rotate(1deg); }
.gl-term dd { margin: 0; font-size: clamp(1.05rem, .98rem + .25vw, 1.22rem); line-height: 1.55; color: var(--ink-2); max-width: 46rem; }
.gl-term dd a:not(.tlink) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gl-src { display: flex; width: fit-content; margin-top: .4em; }
/* the close */
.gl-close__slip { display: grid; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)); transform: rotate(-.6deg); font: 400 calc(14 * var(--u)) / 1.5 var(--read); color: var(--ink); }
.gl-close__slip a:not(.ticket) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .gl-tapes { margin-right: 0; }
}
@media (max-width: 760px) {
  .gl-tapes { margin: 24px -20px 40px; gap: 16px; }
  .gl-tape--b { margin-left: 0; }
  .gl-tape__t { font-size: .8rem; }
  .gl-note { display: none; }
  .gl-term { grid-template-columns: 1fr; gap: 10px; }
  .gl-terms.pcard { padding: 6px 16px; }
  .gl-term dt .label--tape { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-tape__strip { transition: none; }
}