/* DE: Fingeralphabet-Streifen auf der Wortseite (Words::FingerspellComponent), zwei Varianten:
       • ASL — „Symbol Font For ASL" (CC BY 3.0, aslfont), englisches Alphabet, überall (ADR 0070).
       • NSL — „NSL Fingeralphabet" (CC0, selbst gebautes namibisches Team), namibische Sprachen auf dem
         Namibia-Tenant (ADR 0070, Namibia-Slice).
       Die Handform steht über dem echten Buchstaben. Beide Fonts selbst-gehostet aus public/fonts (HR9, kein CDN),
       nicht fingerprinted → url() bleibt stabil (wie die Schulschriften). Attribution je Font im ⓘ + als .txt.
   EN: Fingerspelling strip on the word page (Words::FingerspellComponent), two variants: ASL (CC BY 3.0, English
       everywhere) and NSL (CC0, Namibian languages on the Namibia tenant). Self-hosted from public/fonts (HR9). */
@font-face {
  font-family: "ASLFingerspell";
  src: url("/fonts/symbol-font-for-asl.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "NSLFingerspell";
  src: url("/fonts/nsl-fingeralphabet.woff2") format("woff2");
  font-display: swap;
}

.fingerspell { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-block-start: .6rem; }
.fingerspell__label { font-size: var(--step--1, .9rem); color: var(--text-muted, #555); display: inline-flex; align-items: center; gap: .25rem; }

.fingerspell__row { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.fingerspell__cell { display: flex; flex-direction: column; align-items: center; gap: .1rem; }

/* The handshape: both fonts map the Latin letters; lowercase the glyph input. Decorative (aria-hidden); the
   letter below carries the meaning. Falls back to the plain letter if the font fails — an honest, readable cue.
   The variant class (.fingerspell--asl / --nsl) picks the font. */
.fingerspell__hand { font-family: var(--font-lexical); text-transform: lowercase; font-size: 2.1rem; line-height: 1; color: var(--text, #1b241d); }
.fingerspell--asl .fingerspell__hand { font-family: "ASLFingerspell", var(--font-lexical); }
.fingerspell--nsl .fingerspell__hand { font-family: "NSLFingerspell", var(--font-lexical); }
.fingerspell__letter { font-size: var(--step--2, .8rem); color: var(--text-muted, #555); font-variant: small-caps; letter-spacing: .05em; }