/* sticker-text.css: companion to sticker-text.js. MIT, Copyright (c) 2026 LFC Foundry (see LICENSE). */
.sticker-text {
  --st-fill: linear-gradient(180deg, #ff9a7c 0%, #e8392d 45%, #a3150f 100%);   /* the letter fill */
  --st-edge: #7a120d;                                                           /* hard lower edge */
  /* Outline color: set --st-outline in CSS to recolor the ring. StickerText.apply({outline}) only sets the default. */
  --st-ring-color: var(--st-outline, var(--st-outline-default, #fff7e3));
  /* The outline: one ring of 32 zero-blur copies of the text, .098em out, in the color of the ::before copy (no color given = currentcolor).
     apply() with the radii or steps option writes a different --st-ring on the element. */
  --st-ring:
    .098em 0, .096em .019em, .091em .038em, .081em .054em, .069em .069em, .054em .081em, .038em .091em, .019em .096em,
    0 .098em, -.019em .096em, -.038em .091em, -.054em .081em, -.069em .069em, -.081em .054em, -.091em .038em, -.096em .019em,
    -.098em 0, -.096em -.019em, -.091em -.038em, -.081em -.054em, -.069em -.069em, -.054em -.081em, -.038em -.091em, -.019em -.096em,
    0 -.098em, .019em -.096em, .038em -.091em, .054em -.081em, .069em -.069em, .081em -.054em, .091em -.038em, .096em -.019em;
  position: relative; display: inline-block;
  font-weight: 800; line-height: .92; letter-spacing: -.02em; white-space: nowrap;
  padding-inline: .06em .1em;                         /* room for the outline */
  color: transparent;                                 /* the real text only holds the layout */
  transform: rotate(-2deg); transform-origin: 0 100%; /* a slight tilt reads as hand-placed */
  filter: drop-shadow(0 .05em 0 var(--st-edge)) drop-shadow(0 .1em .07em rgba(0, 0, 0, .28));
}
.sticker-text::before, .sticker-text::after {
  content: attr(data-t);                              /* fallback for older browsers */
  content: attr(data-t) / "";                         /* empty alt text: screen readers skip the decorative copies */
  position: absolute; inset: -.12em 0; padding: .12em 0; padding-inline: inherit;   /* same width as the element, so wrapped text breaks the same; .12em tail room so descenders keep their fill */
  white-space: inherit; text-align: inherit;
}
.sticker-text::before { color: var(--st-ring-color); text-shadow: var(--st-ring); }   /* the outline layer */
.sticker-text::after {
  background: var(--st-fill); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;                                /* the gradient layer */
}
/* Cheaper to draw: no soft ground shadow (the hard lower edge stays). Add class st-flat on text that is repainted often or on many words at once. */
.sticker-text.st-flat { filter: drop-shadow(0 .05em 0 var(--st-edge)); }
/* Fastest outline: one text stroke instead of 32 shadows. Round corners in Firefox and WebKit; Chrome ignores stroke-linejoin on HTML text and draws sharp (mitered) corners. */
.sticker-text.st-stroke::before { text-shadow: none; -webkit-text-stroke: .196em; stroke-linejoin: round; }
/* Windows high contrast: the system forces its own colors and removes text shadows, so show the real text and skip the copies. */
@media (forced-colors: active) {
  .sticker-text, .sticker-text.st-flat { color: CanvasText; filter: none; transform: none; }
  .sticker-text::before, .sticker-text::after { content: none; display: none; }
}
/* Chunky "thick plastic" pill for the subtitle: gradient + hard lip + soft shadow + inner top highlight. */
.sticker-pill {
  display: inline-block; padding: .1em .7em .16em; border-radius: .35em;
  font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #62c981, #2c8a49);
  box-shadow: 0 .12em 0 #1b5c32, 0 .3em .5em rgba(0, 0, 0, .22), inset 0 .08em 0 rgba(255, 255, 255, .35);
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .28); transform: rotate(-2deg);
}