/* =========================================================================
   READY RELEASE — VITRINE « RECENT WORK » : LECTEURS, DATES, TITRES  (v156)

   Fichier a part, charge par index.html SEULEMENT, et charge EN DERNIER
   pour pouvoir surcharger sans toucher aux fichiers partages. Ni
   main.v135.css (utilise par toutes les pages) ni home-cro.v132.css ne
   sont modifies.

   Aucun rectangle ne change de taille. Largeur, hauteur, position, rayon,
   bordure et espacement continuent de venir de .rw__ph.
   ========================================================================= */

/* ------------------------------------------------ LECTEURS VIMEO EN CADRE
   Un iframe ne connait pas object-fit : impossible de lui dire « tiens
   dans cette boite sans te deformer ». Et contraindre les deux axes a la
   fois casse aspect-ratio. On choisit donc l'axe qui commande, et lui
   seul, en fonction des deux ratios — celui de la video et celui du
   rectangle. Le second axe se deduit du ratio, donc l'image reste juste.

     --w : la video est aussi large ou plus large que son cadre
           -> la largeur commande, marge eventuelle en haut et en bas.
     --h : la video est plus etroite que son cadre
           -> la hauteur commande, marge eventuelle a gauche et a droite.

   Cette marge n'est pas une bande noire ajoutee : c'est le fond du
   rectangle qui reste visible, deja sombre. Rien n'est etire, rien n'est
   rogne. */
.rw__ph--v { position: relative; overflow: hidden; }

.rw__ph--v .mv-embed {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}

.rw__ph--v .mv-embed__f {
  display: block; border: 0;
  aspect-ratio: var(--mv-ar, 16 / 9);
}
.rw__ph--v .mv-embed--w .mv-embed__f { width: 100%; height: auto; }
.rw__ph--v .mv-embed--h .mv-embed__f { height: 100%; width: auto; }

/* --fill : le lecteur remplit la HAUTEUR du cadre quitte a deborder en
   largeur, et le debord est rogne symetriquement par overflow:hidden.

   Sert au short central, dont la video n'est pas au format 9:16 de son
   cadre mais en 1280x1946. Ajustee a la largeur, elle s'arretait avant le
   bas du rectangle. Elle est donc agrandie de 16,9 % — soit 8,5 % rognes
   de chaque cote, sur les bords de l'image, jamais sur le sujet centre.

   Les deux dimensions sont ecrites en pourcentage du cadre : la proportion
   est juste par construction, sans dependre de la facon dont le navigateur
   applique aspect-ratio a un iframe. Le rectangle, lui, ne bouge pas. */
.rw__ph--v .mv-embed--fill .mv-embed__f {
  width: var(--mv-fill, 100%);
  height: 100%;
  aspect-ratio: auto;
  max-width: none;
}

/* ------------------------------------------------------- DATES ANNONCEES
   Les deux rectangles restants de la carte Animated. Filigrane : le texte
   se lit sans crier, l'encadrement est fin, tout est centre sur les deux
   axes. Aucune dimension du rectangle n'est touchee. */
.rw__ph--date {
  position: relative;
  display: grid;
  place-items: center;
}

.rw__date {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--line, rgba(242,240,235,0.10));
  border-radius: var(--radius-s, 4px);
  background: rgba(10, 11, 13, 0.22);
}

.rw__date-k {
  font-family: var(--caps, var(--mono, monospace));
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash, #8A8F98);
  opacity: 0.85;
}

.rw__date-v {
  font-family: var(--display, sans-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bone, #F2F0EB);
  opacity: 0.78;
}

/* ------------------------------------------- IDENTIFICATION SOUS UN CLIP
   Une ligne de credit sous un lecteur, dans la grille « Recent work ».
   Elle vit HORS du .rw__ph (donc hors du aria-hidden qui masque le cadre
   decoratif) : un credit d'artiste est une information, pas un ornement.
   Le rectangle au-dessus ne bouge pas : la legende s'ajoute apres lui,
   dans le .rw__slot, comme .rw__in s'ajoute dans le pied de carte. */
.rw__cap {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ash, #8A8F98);
}

/* ---------------------------- PIED DE LA CARTE « CINEMATIC PERFORMANCE »
   Leger decalage vers le bas du bloc de texte, demande au brief. Seul ce
   panneau est vise ; le CTA garde sa place et les huit autres pieds de
   carte sont inchanges. Inverser le signe suffit a le remonter. */
#rwp-ai-video .rw__foot > div { margin-top: 0.5rem; }

/* =========================================================================
   TITRES — AGRANDISSEMENT ET COLORATION PRIDE

   Le degrade est pose sur le TEXTE (background-clip), donc la police, la
   graisse, l'inclinaison, l'alignement et la position restent ceux du
   site. Les teintes sont volontairement adoucies : sur fond sombre, un
   arc-en-ciel sature devient illisible et bon marche. Elles restent
   identifiables comme les six couleurs du drapeau.

   Repli : sans background-clip, le texte garde sa couleur d'origine et
   reste parfaitement lisible.
   ========================================================================= */
:root {
  --pride: linear-gradient(100deg,
    #E4572E 0%, #E8913A 18%, #E8C547 36%,
    #6FB07F 56%, #4F8FC0 76%, #9B6FC0 100%);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .rw__mark,
  .rrp__guide-t {
    background-image: var(--pride);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* « September 2026 » — x2 exactement (1.6rem -> 3.2rem). Police, rotation,
   marges, alignement et conteneur inchanges : seules la taille et la
   couleur bougent, comme demande. */
.rw__mark {
  /* v157 — REDUIT. A 3.2rem, les hampes de « September » venaient toucher le
     « Recent » du titre juste au-dessus : les deux lignes se chevauchaient.
     2.5rem rend l'air necessaire sans rien deplacer — marge, alignement,
     rotation et conteneur sont ceux de home-cro.v132.css, intacts. */
  font-family: 'Permanent Marker', var(--hand, 'Caveat', cursive);
  font-size: 2.1rem;
  opacity: 1;
}

/* Sous 620px, 3.2rem depasserait la gouttiere sur un ecran de 320px. On
   garde le principe du x2 en le bornant a la largeur disponible, sans
   toucher au reste du responsive. */
@media (max-width: 620px) {
  .rw__mark { font-size: clamp(1.6rem, 8vw, 2.1rem); }
}

/* « Not sure which package is right for you? » — meme traitement que
   September 2026 : meme police manuscrite, meme degrade. Le cadre
   (.rrp__guide) n'est pas touche ; seul le titre grossit, et il se replie
   sur deux lignes grace a max-width plutot qu'en poussant les bords. */
.rrp__guide-t {
  /* v157 — MEME POLICE QUE « September 2026 » ET QUE LA PHRASE MANUSCRITE
     DE release.html : 'Permanent Marker', deja auto-hebergee sur le site
     (@font-face dans main.v135.css). Aucun fichier ajoute, aucun appel a
     un service de polices. */
  font-family: 'Permanent Marker', var(--hand, 'Caveat', cursive);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.9vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}