@font-face{font-family:"Buttober";font-display:swap;src:url(Buttober.woff2) format("woff2")}
@font-face{font-family:"Buttober Shine";font-display:swap;src:url(ButtoberShine.woff2) format("woff2")}

/* Buttober lettering. Flat skins need only the class; the layered logo skins also need data-text="same text". */
.bf {
  --bf-fill: #fff; --bf-ink: #000; --bf-halo: transparent; --bf-drop: transparent; --bf-shine: rgba(255,255,255,.9);
  --bf-w: .045em; --bf-halo-w: .022em;
  font-family: "Buttober", "Wet Paint", "Marker", system-ui, sans-serif; font-weight: 400; font-style: normal;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.15;
  color: var(--bf-fill); -webkit-text-stroke: calc(var(--bf-w) * 2) var(--bf-ink); paint-order: stroke fill;
  text-shadow: .06em .07em 0 var(--bf-drop);
}
.bf-white  { --bf-fill: #fff; }
.bf-lime   { --bf-fill: #c6ff1f; }
.bf-pink   { --bf-fill: #ff2bd6; }
.bf-cyan   { --bf-fill: #1fe6ff; }
.bf-yellow { --bf-fill: #ffd21f; }
.bf-orange { --bf-fill: #ff9a1f; }
.bf-ink    { --bf-fill: #0b0810; --bf-ink: #fff; }
.bf.drop-pink { --bf-drop: #ff2bd6; } .bf.drop-cyan { --bf-drop: #1fe6ff; } .bf.drop-lime { --bf-drop: #c6ff1f; } .bf.drop-ink { --bf-drop: #000; }

/* layered skins: the element = ink outline + halo, ::before = gradient fill, ::after = gloss streaks */
.bf[data-text] {
  position: relative; display: inline-block; letter-spacing: 0; padding: .12em .14em .3em; margin: -.12em -.14em -.3em;
  --bf-w: .06em; --h: var(--bf-halo-w); --n: calc(var(--bf-halo-w) * -1);
  color: var(--bf-ink); -webkit-text-stroke: calc(var(--bf-w) * 2) var(--bf-ink); text-shadow: none;
  filter: drop-shadow(var(--n) var(--n) 0 var(--bf-halo)) drop-shadow(var(--h) var(--h) 0 var(--bf-halo)) drop-shadow(var(--h) var(--n) 0 var(--bf-halo)) drop-shadow(var(--n) var(--h) 0 var(--bf-halo)) drop-shadow(.05em .06em 0 var(--bf-drop));
}
.bf[data-text]::before, .bf[data-text]::after { content: attr(data-text); position: absolute; inset: 0; padding: inherit; pointer-events: none; text-shadow: none; -webkit-text-stroke: 0; }
.bf[data-text]::before {
  background: linear-gradient(180deg, var(--bf-a) 16%, var(--bf-b) 44%, var(--bf-c) 67%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.bf[data-text]::after { font-family: "Buttober Shine"; color: var(--bf-shine); }
.bf-sunset { --bf-a: #ffd21f; --bf-b: #ff9a1f; --bf-c: #ff2bd6; --bf-halo: #1fe6ff; }
.bf-slime  { --bf-a: #f2ff3a; --bf-b: #b8ff1f; --bf-c: #1fe6ff; --bf-halo: #ff2bd6; }
.bf-candy  { --bf-a: #ff9ad5; --bf-b: #ff2bd6; --bf-c: #7a2bff; --bf-halo: #c6ff1f; }
.bf-ice    { --bf-a: #ffffff; --bf-b: #1fe6ff; --bf-c: #2b6bff; --bf-halo: #ff2bd6; }
.bf-toxic  { --bf-a: #c6ff1f; --bf-b: #36d94a; --bf-c: #7a2bff; --bf-halo: #ffd21f; }
.bf-ghost  { --bf-a: #ffffff; --bf-b: #ffffff; --bf-c: #d9d2ff; --bf-halo: #ff2bd6; }
@media (prefers-contrast: more) { .bf[data-text]::after { display: none; } }