/* Independent trials: remove either data-title-texture or data-title-shadow
   from #hero-heading to revert that treatment without affecting the other. */
.hero-name{--title-ink:var(--text)}
#hero-heading em .hero-name{--title-ink:var(--accent)}

@supports ((background-clip:text) or (-webkit-background-clip:text)){
  #hero-heading[data-title-texture="grain"] .hero-name{
    /* Italic glyphs extend beyond their advance width (especially the final y).
       Paint that overhang too; negative margins preserve the original layout. */
    padding-inline:.25em;
    margin-inline:-.25em;
    background-color:var(--title-ink);
    background-image:url('/assets/title-grain.png');
    background-size:180px 180px;
    background-repeat:repeat;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    /* A text-shadow would paint over this transparent fill and grey it out. */
    text-shadow:none;
  }
}
#hero-heading[data-title-shadow="soft"] .hero-name{
  /* Static and confined to the two words; never animate the filter. */
  filter:drop-shadow(0 2px 5px #10091759);
}
@media(max-width:800px){
  #hero-heading em .hero-name{--title-ink:#e2cbd9}
}
@media(forced-colors:active){
  #hero-heading[data-title-texture] .hero-name{background:none;-webkit-text-fill-color:currentColor}
  #hero-heading[data-title-shadow] .hero-name{text-shadow:none;filter:none}
}