/* ============================================
   WAB OS — l'autocollant « HELLO my name is »
   Partagé par l'accueil, Work, Services et Applications (une seule
   version, là où il y en avait trois). Traité comme un vrai
   autocollant imprimé :
   — l'encre d'imprimerie Klein, texte blanc à 8,5:1 ;
   — un bandeau bleu en haut et un filet bleu en bas, la zone blanche
     où l'on écrit le nom au milieu, comme l'original ;
   — une marge de découpe blanche de 3 px, comme un vinyle : elle le
     détache aussi bien du blanc que du bleu du premier écran ;
   — un grain d'impression et un léger reflet de vinyle par-dessus ;
   — l'ombre d'un objet posé : un bord de découpe, une ombre de
     contact nette, une portée courte et douce.
   Décor : toujours dans un conteneur aria-hidden.

     <span class="sticker"><span class="sticker__hello">HELLO</span>
       <span class="sticker__mine">my name is</span>
       <span class="sticker__name">WAB.</span></span>
   ============================================ */

.sticker {
    position: relative;
    isolation: isolate;
    display: block;
    width: 120px;
    padding-bottom: 7px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--klein);
    box-shadow:
        0 0 0 3px var(--paper),
        0 0 0 3.5px oklch(0.18 0.005 265 / 0.12),
        0 2px 2px 2px oklch(0.18 0.005 265 / 0.12),
        0 14px 22px -8px oklch(0.12 0.06 266 / 0.32);
    text-align: center;
    color: var(--on-klein);
    user-select: none;
    -webkit-user-select: none;
}

/* Le grain d'impression (deux passes du grain du bureau, décalées)
   et le reflet du vinyle, en biais depuis le haut à gauche. */
.sticker::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(118deg, oklch(1 0 0 / 0.3), oklch(1 0 0 / 0) 36%, oklch(1 0 0 / 0) 72%, oklch(1 0 0 / 0.1)),
        var(--grain) 0 0 / 120px 120px,
        var(--grain) 37px 53px / 120px 120px;
    pointer-events: none;
}

.sticker__hello {
    display: block;
    padding-top: 9px;
    font-size: 13px;
    font-weight: var(--w-strong);
    letter-spacing: 0.14em;
    line-height: 1;
}

.sticker__mine {
    display: block;
    padding: 3px 0 7px;
    font-size: 8px;
    letter-spacing: 0.08em;
    line-height: 1;
}

.sticker__name {
    display: block;
    margin: 0 6px;
    padding: 11px 0 10px;
    border-radius: 4px;
    background: var(--paper);
    box-shadow: inset 0 1px 2px oklch(0.18 0.005 265 / 0.12);
    font-size: 1.2rem;
    font-weight: var(--w-strong);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--glass-ink);
}