@font-face {
    font-family: 'lelandregular';
    src: url('./leland-webfont.woff2') format('woff2'),
         url('./leland-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'leland_textregular';
    src: url('./lelandtext-webfont.woff2') format('woff2'),
         url('./lelandtext-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.smufl {
  font-family: "lelandregular", system-ui, sans-serif;
  font-style: normal;   
  font-weight: 400;     
  line-height: 1;
  font-size: 40px;
  font-synthesis: none; 
}

.scoresymbol {
  font-family: "lelandregular", system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;   /* don’t fake bold/italic */
  line-height: 1;
  display: inline-block;
  position: absolute;
  vertical-align: middle; /* looks nicer next to text */
  font-size: 40px;        /* tweak as you like */
  transform: translate(-50%,-49%);
}

.scoresymbol::before {
  display: inline-block;
  /* content set per symbol below */
}

.scoresymbol[data-symbol="clef-g"] { transform: translate(0%,-49%); }
.scoresymbol[data-symbol="clef-f"] { transform: translate(0%,-49%); }
.scoresymbol[data-symbol="clef-c"] { transform: translate(0%,-49%); }

/* Clefs */
.scoresymbol[data-symbol="clef-g"]::before { content: "\E050"; } /* gClef */
.scoresymbol[data-symbol="clef-f"]::before { content: "\E062"; } /* fClef */
.scoresymbol[data-symbol="clef-c"]::before { content: "\E05C"; } /* cClef */

/* Accidentals */
.scoresymbol[data-symbol="sharp"]::before   { content: "\E262"; } /* accidentalSharp */
.scoresymbol[data-symbol="flat"]::before    { content: "\E260"; } /* accidentalFlat */
.scoresymbol[data-symbol="natural"]::before { content: "\E261"; } /* accidentalNatural */

/* time signatures */
.scoresymbol[data-symbol="time-signature-0"]::after { content:"\E080"; }
.scoresymbol[data-symbol="time-signature-1"]::after { content:"\E081"; }
.scoresymbol[data-symbol="time-signature-2"]::after { content:"\E082"; }
.scoresymbol[data-symbol="time-signature-3"]::after { content:"\E083"; }
.scoresymbol[data-symbol="time-signature-4"]::after { content:"\E084"; }
.scoresymbol[data-symbol="time-signature-5"]::after { content:"\E085"; }
.scoresymbol[data-symbol="time-signature-6"]::after { content:"\E086"; }
.scoresymbol[data-symbol="time-signature-7"]::after { content:"\E087"; }
.scoresymbol[data-symbol="time-signature-8"]::after { content:"\E088"; }
.scoresymbol[data-symbol="time-signature-9"]::after { content:"\E089"; }


/* Rests */
.scoresymbol[data-symbol="rest-quarter"]::before { content: "\E4E5"; } /* restQuarter */
/* You can add others similarly: rest-half (\E4E4), rest-whole (\E4E3), rest-8th (\E4E6) */

/* Noteheads */
.scoresymbol[data-symbol="head-white"]::before   { content: "\E0A2"; } /* noteheadWhole */
.scoresymbol[data-symbol="head-black"]::before { content: "\E0A4"; } /* noteheadBlack */


.scoresymbol[data-symbol="flag-up-eighth"]::after         { content: "\E240"; } /* flag8thUp */
.scoresymbol[data-symbol="flag-up-sixteenth"]::after      { content: "\E242"; } /* flag16thUp */
.scoresymbol[data-symbol="flag-up-thirty-second"]::after  { content: "\E244"; } /* flag32ndUp */
.scoresymbol[data-symbol="flag-up-sixty-fourth"]::after   { content: "\E246"; } /* flag64thUp */

.scoresymbol[data-symbol="flag-down-eighth"]::after        { content: "\E241"; } /* flag8thDown */
.scoresymbol[data-symbol="flag-down-sixteenth"]::after     { content: "\E243"; } /* flag16thDown */
.scoresymbol[data-symbol="flag-down-thirty-second"]::after { content: "\E245"; } /* flag32ndDown */
.scoresymbol[data-symbol="flag-down-sixty-fourth"]::after  { content: "\E247"; } /* flag64thDown */

.scoresymbol[data-symbol="stem"] { position: absolute; transform: translate(-50%,0%); } 


/* =========================
   Articulations (SMuFL / Leland)
   ========================= */

/* Accent */
.scoresymbol[data-symbol="artic-up-accent"]::before { content: "\E4A0"; } /* articAccentAbove */
.scoresymbol[data-symbol="artic-down-accent"]::before { content: "\E4A1"; } /* articAccentBelow */

/* Staccato */
.scoresymbol[data-symbol="artic-up-staccato"]::before { content: "\E4A2"; } /* articStaccatoAbove */
.scoresymbol[data-symbol="artic-down-staccato"]::before { content: "\E4A3"; } /* articStaccatoBelow */

/* Tenuto */
.scoresymbol[data-symbol="artic-up-tenuto"]::before { content: "\E4A4"; } /* articTenutoAbove */
.scoresymbol[data-symbol="artic-down-tenuto"]::before { content: "\E4A5"; } /* articTenutoBelow */

/* Staccatissimo (dot variants) */
.scoresymbol[data-symbol="artic-up-staccatissimo"]::before { content: "\E4A6"; } /* articStaccatissimoAbove */
.scoresymbol[data-symbol="artic-down-staccatissimo"]::before { content: "\E4A7"; } /* articStaccatissimoBelow */

/* Staccatissimo (wedge) */
.scoresymbol[data-symbol="artic-up-staccatissimo-wedge"]::before { content: "\E4A8"; } /* articStaccatissimoWedgeAbove */
.scoresymbol[data-symbol="artic-down-staccatissimo-wedge"]::before { content: "\E4A9"; } /* articStaccatissimoWedgeBelow */

/* Staccatissimo (stroke) */
.scoresymbol[data-symbol="artic-up-staccatissimo-stroke"]::before { content: "\E4AA"; } /* articStaccatissimoStrokeAbove */
.scoresymbol[data-symbol="artic-down-staccatissimo-stroke"]::before { content: "\E4AB"; } /* articStaccatissimoStrokeBelow */

/* Marcato */
.scoresymbol[data-symbol="artic-up-marcato"]::before { content: "\E4AC"; } /* articMarcatoAbove */
.scoresymbol[data-symbol="artic-down-marcato"]::before { content: "\E4AD"; } /* articMarcatoBelow */

/* Marcato–staccato */
.scoresymbol[data-symbol="artic-up-marcato-staccato"]::before { content: "\E4AE"; } /* articMarcatoStaccatoAbove */
.scoresymbol[data-symbol="artic-down-marcato-staccato"]::before { content: "\E4AF"; } /* articMarcatoStaccatoBelow */

/* Accent–staccato */
.scoresymbol[data-symbol="artic-up-accent-staccato"]::before { content: "\E4B0"; } /* articAccentStaccatoAbove */
.scoresymbol[data-symbol="artic-down-accent-staccato"]::before { content: "\E4B1"; } /* articAccentStaccatoBelow */

/* Tenuto–staccato (portato / louré) */
.scoresymbol[data-symbol="artic-up-tenuto-staccato"]::before { content: "\E4B2"; } /* articTenutoStaccatoAbove */
.scoresymbol[data-symbol="artic-down-tenuto-staccato"]::before { content: "\E4B3"; } /* articTenutoStaccatoBelow */

/* Tenuto–accent */
.scoresymbol[data-symbol="artic-up-tenuto-accent"]::before { content: "\E4B4"; } /* articTenutoAccentAbove */
.scoresymbol[data-symbol="artic-down-tenuto-accent"]::before { content: "\E4B5"; } /* articTenutoAccentBelow */

/* Stress / Unstress */
.scoresymbol[data-symbol="artic-up-stress"]::before { content: "\E4B6"; }   /* articStressAbove */
.scoresymbol[data-symbol="artic-down-stress"]::before { content: "\E4B7"; }   /* articStressBelow */
.scoresymbol[data-symbol="artic-up-unstress"]::before { content: "\E4B8"; } /* articUnstressAbove */
.scoresymbol[data-symbol="artic-down-unstress"]::before { content: "\E4B9"; } /* articUnstressBelow */

/* Laissez vibrer (l.v.) */
.scoresymbol[data-symbol="artic-up-laissez-vibrer"]::before { content: "\E4BA"; } /* articLaissezVibrerAbove */
.scoresymbol[data-symbol="artic-down-laissez-vibrer"]::before { content: "\E4BB"; } /* articLaissezVibrerBelow */

/* Marcato–tenuto (optional but common) */
.scoresymbol[data-symbol="artic-up-marcato-tenuto"]::before { content: "\E4BC"; } /* articMarcatoTenutoAbove */
.scoresymbol[data-symbol="artic-down-marcato-tenuto"]::before { content: "\E4B3"; } /* articMarcatoTenutoBelow (SMuFL: U+E4B3) */


/* ──────────────────────────────────────
   Augmentation (duration) dots
   SMuFL: augmentationDot (U+E1E7)
   Use one, or the convenience double/triple variants.
   They render the same glyph repeated with tight spacing.
   ────────────────────────────────────── */

.scoresymbol[data-symbol="augment-dot-1"]::before {
  content: "\E1E7"; /* augmentationDot */
}

/* Convenience: double & triple dotted notes */
.scoresymbol[data-symbol="augment-dot-2"]::before {
  content: "\E1E7\E1E7"; /* two augmentation dots */
  letter-spacing: 0.03em; /* gentle spacing between dots */
}

.scoresymbol[data-symbol="augment-dot-3"]::before {
  content: "\E1E7\E1E7\E1E7"; /* three augmentation dots */
  letter-spacing: 0.03em;
}

.scoresymbol[data-symbol="augment-dot-4"]::before {
  content: "\E1E7\E1E7\E1E7\E1E7";
  letter-spacing: 0.03em;
}