/* StoryMoon · name-art: the child's name drawn in the same lettering as a series logo.
   The name is dynamic, so it is live text (CSS), never part of the logo picture.

   Markup (one element per name; data-text must equal the text, --len = number of characters):
     <span class="sm-name sm-name--super" data-text="Mia" style="--len:3"><span>Mia</span></span>
   Connector words ("and" / "y" / the comma of "Mia, detective") use the same class plus sm-name--join:
     <span class="sm-name sm-name--light sm-name--join" data-text="and" style="--len:3"><span>and</span></span>
   Size: set font-size on the element (or --size); long names shrink automatically:
     effective size = --size * min(1, --fit / --len)   (--fit: how many characters fit at full size)
   Fonts (Google Fonts, latin + latin-ext, so á é í ó ú ñ ü ç ë load):
     Lilita One (super), Pacifico (light), Alfa Slab One (detective).
     <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Lilita+One&family=Pacifico&display=swap" rel="stylesheet">
   Layers: ::before = outline + 3D extrusion (drop-shadows), inner span = gradient fill, ::after = sparkles.
   Works on night and cream backgrounds; no JS. */

.sm-name {
  --size: 1em; --fit: 7; --len: 4;
  position: relative; display: inline-block; isolation: isolate; white-space: nowrap; line-height: 1.15;
  font-size: calc(var(--size) * max(0.5, min(1, calc(var(--fit) / var(--len)))));
  padding: 0 .14em; /* room for the outline */
}
.sm-name::before {
  content: attr(data-text); position: absolute; inset: 0; padding: inherit; z-index: -1;
  color: var(--sm-ink); -webkit-text-stroke: var(--sm-stroke) var(--sm-ink);
  filter: var(--sm-depth);
}
.sm-name > span {
  position: relative;
  background: var(--sm-fill); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .012em #ffffff55; /* thin inner rim highlight */
}

/* SUPER: italic comic letters, yellow-to-orange, thick navy outline, navy extrusion, sparkles */
.sm-name--super {
  font-family: 'Lilita One', 'Fredoka', sans-serif; letter-spacing: .01em;
  --sm-ink: #10235f; --sm-stroke: .17em;
  --sm-fill: linear-gradient(180deg, #fff6a8 0%, #ffd83a 30%, #ffae22 62%, #ff7a18 100%);
  --sm-depth: drop-shadow(.02em .05em 0 #0a1745) drop-shadow(.02em .05em 0 #0a1745) drop-shadow(.01em .04em 0 #07102f) drop-shadow(0 .1em .12em #0007);
  transform: skewX(-10deg) rotate(-4deg);
}
.sm-name--super::after {
  content: "\2726"; position: absolute; right: -.28em; top: -.32em; font-size: .42em; color: #fff;
  text-shadow: 0 0 .25em #fff, 0 0 .5em #ffd83a; -webkit-text-stroke: 0; transform: rotate(12deg);
}
.sm-name--super > span::after {
  content: "\2726"; position: absolute; left: -.42em; bottom: .02em; font-size: .26em; color: #fff3b0;
  background: none; -webkit-text-stroke: 0; text-shadow: 0 0 .3em #ffd83a;
}

/* LITTLE LIGHT: golden brush script, dark-honey outline, warm glow */
.sm-name--light {
  font-family: 'Pacifico', 'Grandstander', cursive; --fit: 8;
  --sm-ink: #5b3412; --sm-stroke: .1em;
  --sm-fill: linear-gradient(180deg, #fff4c4 0%, #ffd45e 38%, #f0a92e 72%, #c97a17 100%);
  --sm-depth: drop-shadow(0 .035em 0 #3d2108) drop-shadow(0 .03em 0 #3d2108) drop-shadow(0 0 .22em #ffcf5a88);
  padding: .05em .22em .12em;
}
.sm-name--light::after {
  content: ""; position: absolute; right: .02em; top: .02em; width: .2em; height: .2em; border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0 30%, #ffd45e 55%, #ffd45e00 72%); box-shadow: 0 0 .25em .06em #ffd45e88;
}

/* DETECTIVE: mustard slab serif, dark outline, teal extrusion down-right */
.sm-name--detective {
  font-family: 'Alfa Slab One', 'Fredoka', serif; letter-spacing: .02em;
  --sm-ink: #13262e; --sm-stroke: .12em;
  --sm-fill: linear-gradient(180deg, #fff1a0 0%, #ffd54a 40%, #f2b21c 75%, #d98d0c 100%);
  --sm-depth: drop-shadow(.035em .045em 0 #0f6d70) drop-shadow(.03em .04em 0 #0b5558) drop-shadow(0 .09em .1em #0006);
  transform: rotate(-2deg);
}

/* connector words: same treatment, smaller, no sparkles */
.sm-name--join { font-size: calc(var(--size) * .5); }
.sm-name--join::after, .sm-name--join > span::after { content: none; }