/* =========================================================================
   OWELLE — personnalisations (surcharge le CSS Webflow d'origine)
   Ce fichier n'est JAMAIS regenere par le localiseur : edition libre.
   ========================================================================= */

/* Badge "Made in Webflow" injecte par le JS Webflow (pages du staging) : masque */
.w-webflow-badge{ display: none !important; }

/* PAGE SERVICES : video autoplay a la place de la photo */
.ow-service-video{
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 13px; overflow: hidden; background: #ddd;
}
.ow-service-video iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* layout 50/50 (texte gauche, video droite) pour les items services */
.ow-svc-pst{
  display: flex !important; flex-direction: row-reverse;   /* texte gauche, video droite */
  align-items: center; gap: clamp(20px, 3vw, 48px);
}
.ow-svc-pst > .div-block-41{ flex: 1 1 0 !important; width: auto !important; min-width: 0; }
.ow-svc-pst > .ow-service-video{ flex: 3 1 0 !important; width: auto !important; min-width: 0; }
.ow-svc-pst .bloc-line{ border-top: none !important;        /* enlever le trait */
  margin-right: 0 !important; padding-right: 0 !important; }
.ow-svc-pst .div-block-48{ padding-right: 0 !important; }   /* marge a droite du texte */
.ow-svc-pst .div-block-41 p{ margin: 0 0 1em !important; }   /* paragraphes : meme espacement */
.ow-svc-row{ align-items: center; gap: clamp(20px, 3vw, 48px); }
.ow-svc-row > :not(.ow-service-video){ flex: 1 1 0 !important; width: auto !important; min-width: 0; }
.ow-svc-row > .ow-service-video{ flex: 3 1 0 !important; width: auto !important; min-width: 0; }

/* marges laterales petites (comme la home) sur la page SERVICES uniquement */
body.ow-services .section-3{ width: auto !important; max-width: none !important;
  margin-left: 16px !important; margin-right: 16px !important; }

/* --- Variables d'harmonisation (espaces & typo) ------------------------- */
:root{
  --ow-gap: 20px;          /* marge de base */
  --ow-gap-lg: 48px;       /* grandes sections */
  --ow-radius: 12px;
}

/* =========================================================================
   1) CARTES WORKS — survol
   Le panneau d'infos (.work-item-container) doit etre masque par defaut et
   apparaitre AVEC FOND BLANC au survol, puis DISPARAITRE quand on sort.
   On force l'opacite en !important pour neutraliser tout etat inline laisse
   par Webflow IX2 (qui rendait le panneau collant).
   ========================================================================= */
.work-item .work-item-container{
  opacity: 0 !important;
  background: #fff !important;
  border-radius: var(--ow-radius);
  transition: opacity .15s ease;
}
.work-item .work-item-container:hover{
  opacity: 1 !important;
}

/* 6) Toute la vignette cliquable : curseur main sur la carte entiere */
.work-item, .work-item-main, .work-item-container, .background-normal{
  cursor: pointer;
}

/* 6) Retirer les liens/mots "Soundcloud / Watch / ..." des vignettes Works */
.work-item .links-div-thumb{ display: none !important; }

/* =========================================================================
   7) FILTRES PAR TAGS — une seule case : le carre bleu (Finsweet).
   On supprime le contour gris arrondi par defaut de Webflow.
   ========================================================================= */
.filter-btn-container .w-checkbox-input{
  border: 1px solid var(--color-thief) !important;
  border-radius: 0 !important;
  width: 15px !important;
  height: 15px !important;
  box-shadow: 0 2px 5px #0003 !important;
  background-color: transparent;
}
.filter-btn-container .w-checkbox-input.w--redirected-checked{
  background-color: var(--color-thief) !important;
}

/* =========================================================================
   8) MENU "CLASSEUR" — ombre portee sur la TOTALITE de chaque onglet.
   drop-shadow suit la forme reelle de l'onglet (coins arrondis compris).
   ========================================================================= */
.tab2{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)) !important;
}
.tab2.w--current{
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)) !important;
  z-index: 2;
}

/* =========================================================================
   LIGHTBOX (galerie About cliquable) — overlay injecte par custom.js
   ========================================================================= */
#ow-lightbox{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.88);
  display: none; align-items: center; justify-content: center;
  padding: 4vmin; cursor: zoom-out;
}
#ow-lightbox.open{ display: flex; }
#ow-lightbox img{
  max-width: 95vw; max-height: 92vh;
  border-radius: var(--ow-radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.ow-clickable{ cursor: zoom-in; }

/* =========================================================================
   4) CAROUSEL "LATEST WORKS" (home) — slider horizontal moderne
   ========================================================================= */
/* Carousel : sur la page Works, il remplace la 1re section -> flux normal. */
.ow-featured{
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1400px;
  margin: var(--ow-gap-lg) auto;
  padding: 0 var(--ow-gap-lg);
  box-sizing: border-box;
}
.ow-featured-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ow-gap); margin-bottom: var(--ow-gap);
}
.ow-featured-title{
  font-family: var(--titles, "Michroma", sans-serif);
  font-size: clamp(20px, 3vw, 30px);
  margin: 0; color: #111;
}
.ow-featured-nav{ display: flex; gap: 8px; }
.ow-arrow{
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid #111; background: #fff; color: #111;
  font-size: 18px; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.ow-arrow:hover{ background: #111; color: #fff; }

.ow-track{
  display: flex; gap: 18px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;             /* Firefox */
  cursor: grab;
}
.ow-track::-webkit-scrollbar{ display: none; }   /* Chrome/Safari */
.ow-track.dragging{ cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }

.ow-card{
  flex: 0 0 clamp(260px, 40vw, 460px);
  scroll-snap-align: start;
  text-decoration: none; color: inherit;
  display: block;
}
.ow-card-img{
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  background-size: cover; background-position: 50%;
  background-color: #ddd;
  border-radius: var(--ow-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease, background-image .6s ease;
}
/* video autoplay (iframe YouTube) qui remplit la carte, coins arrondis */
.ow-card-img.ow-has-video iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; pointer-events: none;        /* le clic ouvre la release */
}
/* galerie qui tourne : fondu doux entre images */
.ow-card-img.ow-has-gallery{
  transition: background-image .6s ease, transform .25s ease, box-shadow .25s ease;
}
.ow-card:hover .ow-card-img{
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.ow-card-meta{
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 2px 0;
}
.ow-card-cat{
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-thief, #566fff);
}
.ow-card-title{
  font-family: var(--titles, "Michroma", sans-serif);
  font-size: 16px; color: #111; line-height: 1.2;
}
@media (max-width: 600px){
  .ow-featured{ padding: 0 var(--ow-gap); }
  .ow-card{ flex-basis: 78vw; }
}

/* =========================================================================
   MODE SHOWCASE PLEIN ECRAN : 1 grand travail par slide, carousel infini.
   ========================================================================= */
.ow-featured--showcase{
  position: relative;
  width: 100vw; max-width: none;            /* franc bord pleine largeur */
  margin-left: calc(50% - 50vw);
  padding: clamp(14px, 2.5vh, 28px) 0;      /* compact : on garde filtres +
                                               fleches du bas visibles a l'ecran */
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box;
}
.ow-featured--showcase .ow-track{
  scroll-snap-type: x mandatory;
  gap: 0; width: 100%;
}
.ow-slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 2.3fr 1fr;          /* la video prend plus de place */
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  padding: 0 5vw;
  box-sizing: border-box;
  text-decoration: none; color: inherit;
}
.ow-slide .ow-slide-media{ width: 100%; display: flex; justify-content: center; }
/* media VIDEO/cover : 16:9, hauteur plafonnee pour rester compact */
.ow-slide .ow-card-img{
  height: clamp(260px, 52vh, 520px); width: auto;
  aspect-ratio: 16 / 9; max-width: 100%; margin: 0 auto;
  border-radius: var(--ow-radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}
/* media GALERIE : format naturel de la photo (pas 16:9) */
.ow-slide .ow-card-img.ow-gallery-natural{
  height: auto; aspect-ratio: auto; width: auto; max-width: 100%;
  background: none; box-shadow: none; overflow: visible;
}
.ow-gallery-img{
  display: block; max-width: 100%; max-height: clamp(260px, 52vh, 520px);
  width: auto; height: auto;
  border-radius: var(--ow-radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}
.ow-slide-info{ display: flex; flex-direction: column; gap: 10px; }
/* pastille categorie : petit texte bleu minuscule, contour arrondi */
.ow-slide-cat{
  align-self: flex-start;
  font-size: 12px; text-transform: lowercase; letter-spacing: .02em;
  color: var(--color-thief, #566fff);
  border: 1px solid var(--color-thief, #566fff);
  border-radius: 999px; padding: 3px 12px;
}
.ow-slide-title{
  font-family: var(--titles, "Michroma", sans-serif);
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; margin: 0; color: #111;
}
.ow-slide-sub{ font-size: clamp(15px,1.5vw,19px); color: #444; margin: 0 0 6px; }
.ow-slide-meta{ margin: 8px 0 6px; display: flex; flex-direction: column; gap: 5px; }
.ow-slide-meta .ow-meta-row{ display: flex; gap: 10px; font-size: 15px; }
.ow-slide-meta dt{ color: #888; min-width: 78px; }
.ow-slide-meta dd{ margin: 0; color: #111; }
.ow-slide-link{
  margin-top: 12px; align-self: flex-start;
  font-family: var(--titles, "Michroma", sans-serif); font-size: 15px;
  padding: 10px 22px; border: 1px solid #111; border-radius: 999px; color: #111;
  transition: background .15s ease, color .15s ease;
}
.ow-slide:hover .ow-slide-link{ background: #111; color: #fff; }

/* fleches gauche/droite : meme icone que les fleches du bas, SANS rond */
.ow-featured--showcase .ow-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6; width: 30px; height: 30px;
  border: 0; background: none; border-radius: 0; padding: 0;
  color: #111; cursor: pointer;
}
.ow-featured--showcase .ow-arrow:hover{ color: var(--color-thief, #566fff); }
.ow-arrow-svg{ width: 100%; height: auto; fill: currentColor; display: block; }
/* l'icone pointe en haut-droite par defaut : on l'oriente */
.ow-featured--showcase .ow-next .ow-arrow-svg{ transform: rotate(45deg); }
.ow-featured--showcase .ow-prev .ow-arrow-svg{ transform: rotate(225deg); }
.ow-featured--showcase .ow-prev{ left: 2vw; }
.ow-featured--showcase .ow-next{ right: 2vw; }

/* points de navigation */
.ow-dots{ display: flex; gap: 9px; justify-content: center; margin-top: clamp(20px,3vh,40px); }
.ow-dot{
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid #111; background: transparent; cursor: pointer; padding: 0;
  transition: background .15s ease;
}
.ow-dot.active{ background: #111; }

@media (max-width: 760px){
  .ow-featured--showcase{ min-height: auto; padding: var(--ow-gap-lg) 0; }
  .ow-slide{ grid-template-columns: 1fr; gap: var(--ow-gap); padding: 0 6vw; }
  .ow-gallery-img{ max-height: 50vh; }
}

/* =========================================================================
   PAGE WORKS — fleches du bas retirees (espace garde) + cases plus grandes,
   empilees verticalement.
   ========================================================================= */
/* on retire les 3 fleches mais on garde l'espace vide (visibility) */
.arrow-down{ visibility: hidden !important; }
/* cases de categories : empilees, plus grandes, typo plus grande */
.collection-list-3{
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 14px;
  margin-bottom: 10px;     /* espace sous la div des checkbox */
}
.collection-list-3 .collection-item-7,
.collection-list-3 .filter-btn-container{ margin: 0 !important; }
.filter-btn-container{ justify-content: flex-start !important; }
.filter-btn-container .w-checkbox-input{ width: 22px !important; height: 22px !important; }
.fs-checkbox_label-4.filter-btn{ font-size: 24px !important; padding-left: 14px; }

/* =========================================================================
   HOME — derniers travaux (memes vignettes que Works) + CTA "more works".
   Le hero de la home est plein ecran (100vh, absolu) : on pousse la section
   juste en dessous.
   ========================================================================= */
.ow-home-latest{
  position: relative; z-index: 5;
  margin-top: 100vh;          /* colle juste sous le hero video (100vh) */
  padding: 0;                 /* franc bord : aucun espace autour */
  box-sizing: border-box;
  background: var(--lightgrey, #f1f0f0);
  text-align: center;
}
/* bande "derniers travaux" : pleine largeur, vignettes collees (2 en mobile) */
.ow-home-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                     /* aucun espace entre les vignettes */
  width: 100%; max-width: none; margin: 0;
}
/* franc bord : pas de marge, pas de coins arrondis, pas d'ombre */
.ow-home-grid .work-item{
  width: 100% !important; margin: 0 !important;
  border-radius: 0 !important; filter: none !important;
}
.ow-home-grid .work-item .background-normal,
.ow-home-grid .work-item .background-lsd,
.ow-home-grid .work-item .work-item-container{
  border-radius: 0 !important;
}
@media (max-width: 700px){
  .ow-home-grid{ grid-template-columns: repeat(2, 1fr); }
}
.ow-cta{
  display: inline-block; margin: var(--ow-gap-lg) auto;
  font-family: var(--titles, "Michroma", sans-serif);
  font-size: 18px; color: #111; text-decoration: none;
  padding: 12px 26px; border: 1px solid #111; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.ow-cta:hover{ background: #111; color: #fff; }

/* =========================================================================
   HOME — pre-affichage des travaux (design "en avant" original), empiles
   verticalement, sous le hero. Texte a gauche, media a droite, + CTA.
   ========================================================================= */
/* video de fond en FIXED : elle reste visible sur TOUTE la page pendant le scroll */
.background-video{ position: fixed !important; z-index: 0; }

.ow-works-preview{
  position: relative; z-index: 5;
  padding: 0 16px;                          /* franc bord : mini marge laterale */
  box-sizing: border-box;
  display: flex; flex-direction: column;
}

/* le verrouillage section-par-section est gere en JS (le scroll-snap CSS ne
   fonctionne pas sur la structure html/body de Webflow). */
.ow-hero-spacer{ height: 100vh; }
/* chaque article = une section pleine hauteur (100vh) ; la video fixed transparait
   en fond (floutee) derriere le texte, qui reste lisible */
.ow-preview-item{
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3fr;  /* media = 3/4 de l'horizontal */
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch; align-content: center;     /* contenu centre dans la section */
}
/* calque verre depoli fixe : INACTIF sur le hero (texte net), ACTIF au scroll
   (floute la video pour lire les articles). Active par JS via .active. */
.ow-frost{
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background .35s ease;
}
.ow-frost.active{
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ow-preview-item > *{ min-width: 0; }
.ow-preview-info{
  position: relative;                     /* pour ancrer "more" en bas */
  display: flex; flex-direction: column; justify-content: flex-start;  /* titre aligne EN HAUT / video */
  width: 100% !important; justify-self: stretch; box-sizing: border-box;
  background: none !important;             /* pas de fond gris */
  border-radius: 0 !important; padding: 0 0 38px !important;  /* place pour "more" en bas */
}
.ow-preview-info .link-block-20{ text-decoration: none; color: inherit; display: block; }
.ow-preview-info .heading{ margin-bottom: 4px; }
.ow-preview-info .div-block-21{ display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ow-preview-info .text-block-5{ min-width: 64px; flex: none; }

/* tags de style musical */
.ow-genres{ display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.ow-genre{
  font-size: 12px; color: var(--almost-black, #111);
  border: 1px solid var(--almost-black, #111); border-radius: 999px;
  padding: 3px 12px; line-height: 1.5;
}

/* CTA "more" : petit, bleu, aligne EN BAS de la carte (hauteur du bas video).
   Fleche dans un vrai carre encadre (on corrige le padding asymetrique Webflow). */
.ow-more-link{
  position: absolute; bottom: 0; left: 0; margin: 0;   /* aligne au bas de la video */
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-thief, #566fff); text-decoration: none; font-size: 15px;
}
.ow-more-link .souris-small{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0 !important; box-sizing: border-box;
}
/* fleche du "more" : pointe en haut a droite (diagonale) -> orientation par defaut du SVG */
.ow-more-link .souris-small svg{ width: 13px; height: auto; fill: currentColor; display: block; transform: none; }

/* mini MASONRY (galerie d'images) : 4 colonnes pour rester compact en hauteur */
.ow-masonry{ column-count: 4; column-gap: 8px; }
.ow-masonry-img{
  width: 100%; margin: 0 0 8px; display: block;
  border-radius: var(--ow-radius); break-inside: avoid;
  box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
@media (max-width: 760px){ .ow-masonry{ column-count: 2; } }

/* media : video 16:9 (autoplay) / galerie format naturel (qui tourne) */
.ow-preview-media{ display: block; }
.ow-preview-media .ow-card-img{
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--ow-radius); overflow: hidden;
  background-size: cover; background-position: 50%; background-color: #ddd;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.ow-preview-media .ow-card-img.ow-has-video iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none;
}
.ow-preview-media .ow-card-img.ow-gallery-natural{
  aspect-ratio: auto; width: auto; max-width: 100%;
  background: none; box-shadow: none; overflow: visible;
}
.ow-preview-media .ow-gallery-img{
  display: block; max-width: 100%; max-height: 56vh; width: auto;
  border-radius: var(--ow-radius); box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
/* SECTION dediee "more works" : pleine hauteur, CTA au MEME style que le texte
   du hero (gros, --current-font, bleu, glow blur+drop-shadow) + fleche diagonale,
   barre au survol. */
.ow-cta-section{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.ow-cta-section .ow-cta{
  display: inline-flex; align-items: center; gap: .25em;
  border: none; border-radius: 0; padding: 0; margin: 0;
  font-family: var(--current-font);
  font-size: clamp(40px, 7vw, 80px); line-height: 1;
  color: var(--color-thief, #566fff); text-decoration: none;
  filter: blur(1px) drop-shadow(0 2px 5px rgba(0,0,0,.7));   /* meme glow que le hero */
}
.ow-cta-section .ow-cta .ow-cta-arrow{ display: inline-flex; }
.ow-cta-section .ow-cta .ow-cta-arrow svg{ width: .55em; height: auto; fill: currentColor; display: block; }
.ow-cta-section .ow-cta:hover{ text-decoration: line-through; }

/* fleches du hero : FIXES en bas de l'ecran, z-index SOUS les articles (z:5),
   au-dessus de la video (z:0). Elles restent visibles et invitent a descendre. */
.ow-hero-arrows-down{
  position: fixed !important;
  bottom: 26px; left: 0; right: 0;
  width: auto !important; height: auto !important;
  z-index: 10;            /* DEVANT les articles : fleches nettes (pas floutees) */
  display: flex; justify-content: center; align-items: flex-end; gap: 4vw;
  cursor: pointer;
  transition: opacity .3s ease;   /* disparition douce dans la section CTA */
}
/* fleches vers le bas + 2x plus petites (scale .5) */
.ow-hero-arrows-down .code-embed-2 svg,
.ow-hero-arrows-down svg{ transform: rotate(135deg) scale(.5) !important; }

@media (max-width: 760px){
  .ow-preview-item{ grid-template-columns: 1fr; }
}

/* =========================================================================
   MOBILE (<= 760px)
   ========================================================================= */
@media (max-width: 760px){
  /* marges laterales encore plus petites */
  .ow-works-preview{ padding-left: 8px; padding-right: 8px; }
  body.ow-services .section-3{ margin-left: 8px !important; margin-right: 8px !important; }

  /* SERVICES : texte PLEINE LARGEUR (on empile texte puis video) */
  .ow-svc-pst{ flex-direction: column-reverse !important; }
  .ow-svc-row{ flex-direction: column !important; }
  .ow-svc-pst > *, .ow-svc-row > *{ width: 100% !important; flex: 0 0 auto !important; }

  /* HOME : article empile (texte puis media) */
  .ow-preview-item{ grid-template-columns: 1fr !important; }
}

/* iOS Safari : la video de fond couvre tout l'ecran (derriere les barres) */
.background-video{ height: 100vh !important; }
@supports (height: 100dvh){ .background-video{ height: 100dvh !important; } }

/* =========================================================================
   9) ECRAN DE CHARGEMENT — logo Owelle, masque une fois le site pret
   ========================================================================= */
#ow-loader{
  position: fixed; inset: 0; z-index: 10000;
  background: #f1f0f0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease;
}
#ow-loader.hide{ opacity: 0; pointer-events: none; }
#ow-loader .ow-shrug{
  display: inline-flex;
  font-family: var(--titles, "Michroma", monospace);
  font-size: clamp(34px, 7vw, 64px);
  color: #111;
  white-space: pre;
}
/* chaque piece se demantele puis se reconstruit en position normale (boucle) */
#ow-loader .ow-piece{
  display: inline-block;
  animation: ow-reassemble 2.4s cubic-bezier(.5,.05,.3,1) infinite;
}
@keyframes ow-reassemble{
  0%   { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: .15; }
  40%, 60% { transform: none; opacity: 1; }          /* reconstruit, maintenu */
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: .15; }
}