/* =========================================================
   TYPO CHAT-MAN OG — la chartre de lettre de l'univers
   Celle du mur (postit.css), sortie de sa feuille pour vivre
   seule : le site l'utilise sur l'onglet et le panneau du
   rayon, la page post-it l'utilisera telle quelle. Un seul
   endroit ou la lettre de Chat-Man est definie.

   Elle est FIDELE au mur : meme brun, meme blanc, memes trois
   calibres. Si une couleur bouge la-bas, elle bouge ici. Seule
   la LOI des calibres differe — le mur les pose en pixels, le
   site les fait suivre le corps de la lettre (voir plus bas) ;
   l'intention, elle, est la meme des deux cotes.

   Elle n'habille personne toute seule : elle pose des
   variables, trois calibres et le mecanisme du second trace.
   C'est la peau (peau-chat-man.css) qui dit QUI la porte —
   la chartre ne connait pas la structure du site.

   -------------------------------------------------------
   La lettre, de l'interieur vers l'exterieur :
     1. le blanc de la glyphe
     2. un lisere noir mince — il pose une arete sous le
        blanc, qui sinon se dilue dans le brun a petit corps
     3. un contour brun plus large — c'est lui qui detache le
        mot du monogramme

   Un element n'a qu'un seul -webkit-text-stroke, et il sert
   au noir. Le brun est donc un SECOND TRACE : une copie de la
   meme chaine, tracee en brun, glissee derriere. Le mur la
   dessine en ::before ; ici c'est ::after, et ce n'est pas un
   detail — le ::before est le pseudo a tout faire d'une
   feuille de style (la puce des specs d'Epoque, par exemple),
   et la chartre s'invitait dans une place deja prise. ::after
   est libre, et l'ordre de peinture ne change rien : une
   couche a z-index negatif passe sous le contenu de son
   element, qu'elle vienne avant ou apres lui. Les deux
   sont des contours de glyphe vrais — nets, rasterises avec
   la lettre. La couronne de text-shadow bavait aux angles, le
   drop-shadow repete reste un flou et pose une couche de
   rendu par texte. Le second trace ne coute qu'une
   rasterisation de glyphe de plus.

   Trois calibres, parce que la lettre change de corps ET de
   role d'un endroit a l'autre : au calibre du titre, un petit
   texte verrait ses delies se fermer. Un -webkit-text-stroke
   se trace a cheval sur le contour : seule la MOITIE de la
   valeur deborde, des deux cotes — c'est pourquoi les valeurs
   ci-dessous paraissent le double de ce qu'on voit.
   ========================================================= */

:root {
  --og-encre:   #ffffff;   /* la lettre — blanc pur */
  --og-arete:   #000000;   /* le lisere, sous le blanc */
  --og-contour: #533c2e;   /* le brun fonce de la tuile monogramme */

  /* -------------------------------------------------------
     LES CALIBRES — deux lois au choix

     Le mur pose ses contours en pixels fixes : c'est une page
     ou chaque texte a un corps connu d'avance, et chaque
     valeur y a ete reglee a l'oeil, une par une. Un site n'a
     pas ce luxe — un titre passe de 34 a 52 px selon la
     fenetre, un nom d'objet de 17 a 22. Un contour fixe y est
     trop epais en bas d'echelle et trop maigre en haut.

     La loi par defaut est donc PROPORTIONNELLE : le contour
     suit le corps de la lettre, borne des deux cotes. Le
     plancher garde le trait visible sur du petit texte, le
     plafond l'empeche de fermer les delies d'un grand titre.
     Les trois calibres restent trois INTENTIONS — fort, moyen,
     fin — mais chacun s'exprime en fraction du corps.

     `data-og-echelle="fixe"` sur la racine rend les valeurs
     exactes du mur, au pixel pres. C'est ce que posera la page
     post-it le jour ou elle prendra cette chartre : la-bas,
     les corps sont fixes et les valeurs deja reglees.

     -------------------------------------------------------
     CE QU'ON VOIT N'EST PAS CE QU'ON ECRIT

     Un -webkit-text-stroke se trace A CHEVAL sur le contour du
     glyphe : la moitie part vers l'exterieur, l'autre moitie
     mord dans la lettre. Le brun est dessine SOUS le noir, qui
     est dessine sous le blanc — la bande de brun reellement
     visible n'est donc pas sa valeur, c'est ce qui lui reste
     une fois le noir pose dessus :

         brun visible = (brun - noir) / 2

     Les valeurs du mur donnent 0,9 px de brun visible sous un
     titre de 52 px. Le site n'a pas ces corps-la : ses textes
     tournent autour de 15 a 27 px, et une premiere version qui
     suivait les chiffres du mur au pied de la lettre n'y
     laissait plus que 0,6 px — le brun ne se voyait pas. Le
     rapport a donc ete releve — il vaut 3 aux corps du site,
     contre 2,3 sur le mur — et il n'est pas constant : le brun
     monte plus vite que le lisere. Un titre de 64 px prend
     2,7 px de brun visible, un statut de 11 px en garde 0,6.
     C'est ce rapport, et non les valeurs brutes, qui fait
     tenir la lettre sur le monogramme.

     Regle intangible dans les deux lois : le brun est TOUJOURS
     plus large que le lisere noir qu'il borde, a chaque bout
     de l'echelle — sinon le noir le mange.
     ------------------------------------------------------- */

  /* Le lisere noir, porte par l'element lui-meme. */
  --og-lisere-fort:  clamp(1px,   .045em, 2.6px);   /* grosses capitales */
  --og-lisere-moyen: clamp(.9px,  .04em,  2px);     /* textes, prix, boutons */
  --og-lisere-fin:   clamp(.75px, .034em, 1.5px);   /* mentions, petit corps */

  /* Le contour brun, porte par la copie. Il monte PLUS VITE que le lisere :
     c'est ce qui donne au grand titre un contour franc sans epaissir le
     petit texte. Les planchers rejoignent les valeurs du mur — en dessous,
     les contours de deux lettres voisines se rejoignent et le mot se pose
     sur un bandeau brun au lieu d'etre cerne lettre par lettre. */
  --og-brun-fort:  clamp(3px,   .14em, 8px);
  --og-brun-moyen: clamp(2.4px, .12em, 6px);
  --og-brun-fin:   clamp(2px,   .10em, 4.2px);

  --og-mono:  "Space Mono", ui-monospace, monospace;
  --og-corps: "Space Grotesk", system-ui, sans-serif;
}

/* Les valeurs du mur, au pixel pres. Un `em` dans une custom property n'est
   pas resolu la ou il est ecrit mais la ou il est SUBSTITUE : ces variables
   heritent, et chaque element resout donc l'echelle sur son propre corps.
   C'est ce qui permet a une seule declaration de servir tous les calibres —
   et c'est aussi pourquoi ce repli-ci n'a rien a recalculer. */
[data-og-echelle="fixe"] {
  --og-lisere-fort:  1.4px;
  --og-lisere-moyen: 1px;
  --og-lisere-fin:   .7px;

  --og-brun-fort:  3.2px;
  --og-brun-moyen: 2.4px;
  --og-brun-fin:   1.6px;
}

/* ---------------------------------------------------------
   Les trois calibres
   `--contour: 1` est le signal lu par le JS (Epoque.contour) :
   il annonce « ce texte veut son second trace » et fait poser
   data-contour. Aucune autre partie du site ne connait la
   chartre — elle se declare, elle ne se demande pas.
   --------------------------------------------------------- */

.og,
.og--fort,
.og--fin {
  color: var(--og-encre);
  paint-order: stroke fill;
  --contour: 1;
}

.og {
  -webkit-text-stroke: var(--og-lisere-moyen) var(--og-arete);
  --og-brun: var(--og-brun-moyen);
}

.og--fort {
  -webkit-text-stroke: var(--og-lisere-fort) var(--og-arete);
  --og-brun: var(--og-brun-fort);
}

.og--fin {
  -webkit-text-stroke: var(--og-lisere-fin) var(--og-arete);
  --og-brun: var(--og-brun-fin);
}

/* ---------------------------------------------------------
   Les roles — comment Chat-Man compose, pas seulement comment
   il contourne ses lettres.
   --------------------------------------------------------- */

/* Le titre du mur : mono grasse, largement espacee. */
.og-titre {
  font-family: var(--og-mono);
  font-weight: 700;
  letter-spacing: .14em;
}

/* La mention laterale — « epoque », « chat-man™ » : mono maigre, tres
   espacee, en bas de casse. Elle nomme, elle ne titre pas. */
.og-mention {
  font-family: var(--og-mono);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: lowercase;
}

.og-corps {
  font-family: var(--og-corps);
}

/* ---------------------------------------------------------
   Le second trace
   La copie se lit dans data-contour, pose par le JS : le CSS
   ne sait pas relire le contenu d'un noeud. Un element qui
   contient du balisage n'en porte donc pas — ce sont ses
   feuilles de texte qui le portent.

   Elle se cale sur la boite de rappel de son element
   (inset: 0 sur un parent positionne = sa boite de padding),
   reprend son padding et herite de tout le reste — police,
   corps, alignement, cesure. Elle se replie au meme endroit
   que lui, ligne pour ligne.

   z-index: -1 la passe derriere la lettre : sans lui, la copie
   peint APRES le contenu de son element et le couvrirait. Et `isolation` avec, sinon ce -1
   remonte chercher le premier contexte d'empilement au-dessus
   et la copie va se ranger derriere le motif lui-meme.
   --------------------------------------------------------- */

[data-contour] {
  position: relative;
  isolation: isolate;
}

[data-contour]::after {
  content: attr(data-contour);
  position: absolute;
  inset: 0;
  padding: inherit;
  z-index: -1;

  -webkit-text-stroke: var(--og-brun) var(--og-contour);
  paint-order: stroke fill;
  /* Le remplissage de la copie est brun lui aussi : la vraie lettre le
     recouvre entierement, et un blanc reste dessous ferait un halo au
     moindre decalage de rendu. */
  color: var(--og-contour);

  /* Elle double le texte a l'ecran, pas dans l'arbre : un pseudo n'est pas
     annonce, mais il resterait selectionnable a la souris. */
  pointer-events: none;
  user-select: none;
}